[refactor] replace sass variable with css variable

https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

# Conflicts:
#	app/javascript/flavours/glitch/styles/basics.scss

README.md

@@ -1,6 +1,6 @@
-# Folivora
+# Masto-FE (🦥 flavour)
 
-Folivora is a fork of [Iceshrimp's Masto-FE Standalone](https://iceshrimp.dev/iceshrimp/masto-fe-standalone) repository, which is itself a fork of [Mastodon Glitch Edition](https://github.com/glitch-soc/mastodon), which in turn forks [Mastodon](https://github.com/mastodon/mastodon/). Phew!
+This is a fork of [Iceshrimp's Masto-FE Standalone](https://iceshrimp.dev/iceshrimp/masto-fe-standalone) repository, which is itself a fork of [Mastodon Glitch Edition](https://github.com/glitch-soc/mastodon), which in turn forks [Mastodon](https://github.com/mastodon/mastodon/). Phew!
 
 The goal of this repository is to make it possible to smoothly and intuitively use the Mastodon frontend with a GoToSocial instance as the backend.
 

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 @mixin avatar-radius() {
   border-radius: $ui-avatar-border-size;
   background-position: 50%;

app/javascript/flavours/glitch/styles/about.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
 
@@ -26,7 +30,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;

app/javascript/flavours/glitch/styles/accessibility.scss

@@ -1,3 +1,6 @@
+@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"

app/javascript/flavours/glitch/styles/accounts.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 .card {
   & > a {
     display: block;
@@ -10,7 +14,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
   }
@@ -18,7 +22,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 +43,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 +61,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 +153,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 +219,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 +242,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 +268,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 +337,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 +346,7 @@
   &,
   a,
   strong {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, $lightness: 26%);
   }
 }
 
@@ -354,7 +358,7 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, $lightness: 26%);
   }
 }
 

app/javascript/flavours/glitch/styles/admin.scss

@@ -1,4 +1,7 @@
+@use "sass:color";
 @use "sass:math";
+@use "mixins" as *;
+@use "variables" as *;
 
 $no-columns-breakpoint: 600px;
 $sidebar-width: 240px;
@@ -31,8 +34,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 +125,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 +136,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 +242,7 @@ $content-width: 840px;
           &:hover,
           &:focus,
           &:active {
-            background: lighten($ui-base-color, 4%);
+            background: color.adjust($ui-base-color, $lightness: 4%);
           }
 
           &.selected {
@@ -292,7 +295,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 +396,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 +524,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 +695,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 +715,7 @@ body,
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
   }
 
   &__avatar {
@@ -766,7 +769,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 +809,7 @@ a.name-tag,
   }
 
   &.negative {
-    border-left-color: lighten($error-red, 12%);
+    border-left-color: color.adjust($error-red, $lightness: 12%);
   }
 
   &.warning {
@@ -871,7 +874,7 @@ a.name-tag,
         &:focus,
         &:hover,
         &:active {
-          color: lighten($darker-text-color, 8%);
+          color: color.adjust($darker-text-color, $lightness: 8%);
         }
       }
 
@@ -885,10 +888,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 +963,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 +1000,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 +1011,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 +1092,7 @@ a.name-tag,
 
   &.expired {
     .expiration {
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, $lightness: 12%);
     }
 
     .permissions-list__item__icon {
@@ -1165,7 +1168,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 +1231,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 +1241,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 +1278,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 +1331,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 +1359,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 +1408,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 +1426,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 +1545,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 +1559,7 @@ a.sparkline {
     }
 
     &:hover {
-      background-color: lighten($ui-base-color, 4%);
+      background-color: color.adjust($ui-base-color, $lightness: 4%);
     }
 
     &__avatar {
@@ -1634,13 +1637,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 +1755,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 +1807,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 +1879,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;
     }

app/javascript/flavours/glitch/styles/basics.scss

@@ -1,9 +1,15 @@
+@use "sass:meta";
+@use "sass:string";
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 @function hex-color($color) {
-  @if type-of($color) == "color" {
-    $color: str-slice(ie-hex-str($color), 4);
+  @if meta.type-of($color) == "color" {
+    $color: string.slice(color.ie-hex-str($color), 4);
   }
 
-  @return "%23" + unquote($color);
+  @return "%23" + string.unquote($color);
 }
 
 body {
@@ -109,7 +115,7 @@ body {
   }
 
   &.embed {
-    background: lighten($ui-base-color, 4%);
+    background: color.scale($ui-base-color, $lightness: 4%);
     margin: 0;
     padding-bottom: 0;
 
@@ -122,7 +128,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
     padding: 0;
   }
 
@@ -206,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 {

app/javascript/flavours/glitch/styles/branding.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 .logo {
   color: $primary-text-color;
 }

app/javascript/flavours/glitch/styles/components/about.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .image {
   position: relative;
   overflow: hidden;
@@ -84,7 +88,7 @@
       width: 100%;
       height: auto;
       aspect-ratio: 1.9;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
       border-radius: 8px;
       margin-bottom: 30px;
     }
@@ -110,7 +114,7 @@
   }
 
   &__meta {
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
     border-radius: 4px;
     display: flex;
     margin-bottom: 30px;
@@ -126,7 +130,7 @@
       width: 0;
       border: 0;
       border-style: solid;
-      border-color: lighten($ui-base-color, 8%);
+      border-color: color.adjust($ui-base-color, $lightness: 8%);
       border-left-width: 1px;
       min-height: calc(100% - 60px);
       flex: 0 0 auto;
@@ -231,7 +235,7 @@
       line-height: 22px;
       padding: 20px;
       border-radius: 4px;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
       color: $highlight-text-color;
       cursor: pointer;
     }
@@ -241,7 +245,7 @@
     }
 
     &__body {
-      border: 1px solid lighten($ui-base-color, 4%);
+      border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
       border-top: 0;
       padding: 20px;
       font-size: 15px;
@@ -251,18 +255,18 @@
 
   &__domain-blocks {
     margin-top: 30px;
-    background: darken($ui-base-color, 4%);
-    border: 1px solid lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
     border-radius: 4px;
 
     &__domain {
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
       padding: 10px;
       font-size: 15px;
       color: $darker-text-color;
 
       &:nth-child(2n) {
-        background: darken($ui-base-color, 2%);
+        background: color.adjust($ui-base-color, $lightness: -2%);
       }
 
       &:last-child {

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -1,6 +1,10 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .account {
   padding: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   color: inherit;
   text-decoration: none;
 
@@ -165,7 +169,7 @@
 
 .account__header__wrapper {
   flex: 0 0 auto;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
 }
 
 .account__disclaimer {
@@ -203,8 +207,8 @@
 }
 
 .account__action-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($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%);
   line-height: 36px;
   overflow: hidden;
   flex: 0 0 auto;
@@ -222,7 +226,7 @@
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 100%;
-  border-inline-start: 1px solid lighten($ui-base-color, 8%);
+  border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   padding: 10px 0;
   border-bottom: 4px solid transparent;
 
@@ -278,7 +282,7 @@
   padding: 8px 10px;
   padding-inline-start: 68px;
   position: relative;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   min-height: 54px;
 
   &__details {
@@ -324,9 +328,9 @@
 .account--panel {
   display: flex;
   gap: 5px;
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  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%);
   flex-direction: row;
   padding: 5px;
 }
@@ -481,9 +485,9 @@
 .account__moved-note {
   padding: 14px 10px;
   padding-bottom: 16px;
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  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%);
 
   &__message {
     position: relative;
@@ -563,7 +567,7 @@
     overflow: hidden;
     height: 145px;
     position: relative;
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
 
     img {
       object-fit: cover;
@@ -576,9 +580,9 @@
 
   &__bar {
     position: relative;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
     padding: 5px;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
 
     .avatar {
       display: block;
@@ -586,8 +590,8 @@
       width: 94px;
 
       .account__avatar {
-        background: darken($ui-base-color, 8%);
-        border: 2px solid lighten($ui-base-color, 4%);
+        background: color.adjust($ui-base-color, $lightness: -8%);
+        border: 2px solid color.adjust($ui-base-color, $lightness: 4%);
       }
     }
   }
@@ -707,10 +711,10 @@
 
     .account__header__fields {
       margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 12%);
+      border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
 
       a {
-        color: lighten($ui-highlight-color, 8%);
+        color: color.adjust($ui-highlight-color, $lightness: 8%);
       }
 
       dl:first-child .verified {
@@ -753,8 +757,8 @@
     flex-direction: column;
     font-size: 14px;
     font-weight: 400;
-    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%);
 
     &__header {
       display: flex;
@@ -783,7 +787,7 @@
         &:hover,
         &:active,
         &:focus {
-          color: lighten($darker-text-color, 7%);
+          color: color.adjust($darker-text-color, $lightness: 7%);
           background-color: rgba($darker-text-color, 0.15);
         }
 
@@ -792,7 +796,7 @@
         }
 
         &[disabled] {
-          color: darken($darker-text-color, 13%);
+          color: color.adjust($darker-text-color, $lightness: -13%);
           background-color: transparent;
           cursor: default;
         }
@@ -837,7 +841,7 @@
 .follow-request-banner,
 .account-memorial-banner {
   padding: 20px;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
   display: flex;
   align-items: center;
   flex-direction: column;

app/javascript/flavours/glitch/styles/components/announcements.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .announcements__item__content {
   word-wrap: break-word;
   overflow-y: auto;
@@ -42,7 +46,7 @@
 }
 
 .announcements {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   font-size: 13px;
   display: flex;
   align-items: flex-end;
@@ -126,7 +130,7 @@
 
   &__item {
     flex-shrink: 0;
-    background: lighten($ui-base-color, 12%);
+    background: color.adjust($ui-base-color, $lightness: 12%);
     border: 0;
     border-radius: 3px;
     margin: 2px;
@@ -169,26 +173,26 @@
     &:hover,
     &:focus,
     &:active {
-      background: lighten($ui-base-color, 16%);
+      background: color.adjust($ui-base-color, $lightness: 16%);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
 
       &__count {
-        color: lighten($darker-text-color, 4%);
+        color: color.adjust($darker-text-color, $lightness: 4%);
       }
     }
 
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(
-        lighten($ui-base-color, 12%),
+      background-color: color.mix(
+        color.adjust($ui-base-color, $lightness: 12%),
         $ui-highlight-color,
         80%
       );
 
       .reactions-bar__item__count {
-        color: lighten($highlight-text-color, 8%);
+        color: color.adjust($highlight-text-color, $lightness: 8%);
       }
     }
   }
@@ -219,7 +223,7 @@
     &:active,
     &:focus {
       opacity: 1;
-      color: lighten($darker-text-color, 4%);
+      color: color.adjust($darker-text-color, $lightness: 4%);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
     }

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .column__wrapper {
   display: flex;
   flex: 1 1 auto;
@@ -108,7 +112,7 @@ $ui-header-height: 55px;
 }
 
 .tabs-bar__wrapper {
-  background: darken($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: -8%);
   position: sticky;
   top: $ui-header-height;
   z-index: 2;
@@ -170,7 +174,7 @@ $ui-header-height: 55px;
 .column-back-button {
   box-sizing: border-box;
   width: 100%;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
   border-radius: 4px 4px 0 0;
   color: $highlight-text-color;
   cursor: pointer;
@@ -223,7 +227,7 @@ $ui-header-height: 55px;
 }
 
 .column-link {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   color: $primary-text-color;
   display: block;
   font-size: 16px;
@@ -235,7 +239,7 @@ $ui-header-height: 55px;
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 11%);
+    background: color.adjust($ui-base-color, $lightness: 11%);
   }
 
   &:focus {
@@ -327,7 +331,7 @@ $ui-header-height: 55px;
   color: $darker-text-color;
   font-size: 16px;
   font-weight: 700;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
 }
 
 .column-header > button,
@@ -374,7 +378,7 @@ $ui-header-height: 55px;
   &:focus-visible,
   &:hover,
   &.active {
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
   }
 
   &:active {
@@ -418,7 +422,7 @@ $ui-header-height: 55px;
   &:hover,
   &.active {
     color: inherit;
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
   }
 
   &:active {
@@ -516,7 +520,7 @@ $ui-header-height: 55px;
     height: 0;
     background: transparent;
     border: 0;
-    border-top: 1px solid lighten($ui-base-color, 12%);
+    border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
     margin: 10px 0;
   }
 
@@ -532,7 +536,7 @@ $ui-header-height: 55px;
 }
 
 .column-header__collapsible-inner {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   padding: 15px;
 }
 
@@ -628,11 +632,11 @@ $ui-header-height: 55px;
   &:not([disabled]) {
     &:hover,
     &:focus {
-      background-color: darken($ui-base-color, 10%);
+      background-color: color.adjust($ui-base-color, $lightness: -10%);
     }
 
     &.active {
-      background-color: darken($ui-highlight-color, 2%);
+      background-color: color.adjust($ui-highlight-color, $lightness: -2%);
 
       &:hover,
       &:focus {
@@ -684,7 +688,7 @@ $ui-header-height: 55px;
 }
 
 .follow_requests-unlocked_explanation {
-  background: darken($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: -4%);
   contain: initial;
   flex-grow: 0;
 }
@@ -740,7 +744,7 @@ $ui-header-height: 55px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
 
   label {
     flex: 1 1 auto;
@@ -767,7 +771,7 @@ $ui-header-height: 55px;
 }
 
 .column-settings__outer {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   padding: 15px;
 }
 
@@ -793,7 +797,7 @@ $ui-header-height: 55px;
       @include search-input;
 
       &::placeholder {
-        color: lighten($darker-text-color, 4%);
+        color: color.adjust($darker-text-color, $lightness: 4%);
       }
 
       &::-moz-focus-inner {
@@ -807,7 +811,7 @@ $ui-header-height: 55px;
       }
 
       &:focus {
-        background: lighten($ui-base-color, 4%);
+        background: color.adjust($ui-base-color, $lightness: 4%);
       }
 
       @media screen and (width <= 600px) {
@@ -826,7 +830,7 @@ $ui-header-height: 55px;
     }
 
     &__multi-value {
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: 8%);
 
       &__remove {
         cursor: pointer;
@@ -834,8 +838,8 @@ $ui-header-height: 55px;
         &:hover,
         &:active,
         &:focus {
-          background: lighten($ui-base-color, 12%);
-          color: lighten($darker-text-color, 4%);
+          background: color.adjust($ui-base-color, $lightness: 12%);
+          color: color.adjust($darker-text-color, $lightness: 4%);
         }
       }
     }
@@ -855,12 +859,12 @@ $ui-header-height: 55px;
       &:hover,
       &:active,
       &:focus {
-        color: lighten($dark-text-color, 4%);
+        color: color.adjust($dark-text-color, $lightness: 4%);
       }
     }
 
     &__indicator-separator {
-      background-color: lighten($ui-base-color, 8%);
+      background-color: color.adjust($ui-base-color, $lightness: 8%);
     }
 
     &__menu {
@@ -881,7 +885,7 @@ $ui-header-height: 55px;
 
       &--is-focused,
       &--is-selected {
-        background: darken($ui-secondary-color, 10%);
+        background: color.adjust($ui-secondary-color, $lightness: -10%);
       }
     }
   }
@@ -895,7 +899,7 @@ $ui-header-height: 55px;
 
 .notifications-permission-banner {
   padding: 30px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -973,8 +977,8 @@ $ui-header-height: 55px;
 
 .column-list {
   margin: 0 20px;
-  border: 1px solid lighten($ui-base-color, 8%);
-  background: darken($ui-base-color, 2%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: color.adjust($ui-base-color, $lightness: -2%);
   border-radius: 4px;
 
   &__empty-message {
@@ -1089,7 +1093,7 @@ $ui-header-height: 55px;
 }
 
 .hashtag-header {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   padding: 15px;
   font-size: 17px;
   line-height: 22px;

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .compose-form {
   padding: 10px;
 
@@ -307,7 +311,7 @@
   &:focus,
   &:active,
   &.selected {
-    background: darken($ui-secondary-color, 10%);
+    background: color.adjust($ui-secondary-color, $lightness: -10%);
   }
 
   > .account,
@@ -398,7 +402,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: lighten($secondary-text-color, 7%);
+      color: color.adjust($secondary-text-color, $lightness: 7%);
     }
   }
 
@@ -469,7 +473,7 @@
   border-radius: 6px;
   width: 100%;
   height: 6px;
-  background: darken($simple-background-color, 8%);
+  background: color.adjust($simple-background-color, $lightness: -8%);
 }
 
 .upload-progress__tracker {
@@ -495,7 +499,7 @@
   padding: 10px;
   border-radius: 0 0 4px 4px;
   color: $action-button-color;
-  background: darken($simple-background-color, 8%);
+  background: color.adjust($simple-background-color, $lightness: -8%);
 }
 
 .compose-form__buttons {
@@ -605,7 +609,7 @@
   }
 
   &.active:hover {
-    background: lighten($ui-highlight-color, 4%);
+    background: color.adjust($ui-highlight-color, $lightness: 4%);
   }
 }
 
@@ -687,7 +691,7 @@
           }
 
           &:hover {
-            background: lighten($ui-highlight-color, 4%);
+            background: color.adjust($ui-highlight-color, $lightness: 4%);
           }
         }
       }

app/javascript/flavours/glitch/styles/components/directory.scss

@@ -1,19 +1,23 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .scrollable .account-card {
   margin: 10px;
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .scrollable .account-card__title__avatar {
   img,
   .account__avatar {
-    border-color: lighten($ui-base-color, 8%);
+    border-color: color.adjust($ui-base-color, $lightness: 8%);
   }
 }
 
 .scrollable .account-card__bio::after {
   background: linear-gradient(
     to left,
-    lighten($ui-base-color, 8%),
+    color.adjust($ui-base-color, $lightness: 8%),
     transparent
   );
 }
@@ -61,8 +65,8 @@
     vertical-align: middle;
 
     &.checked {
-      border-color: lighten($ui-highlight-color, 4%);
-      background: lighten($ui-highlight-color, 4%);
+      border-color: color.adjust($ui-highlight-color, $lightness: 4%);
+      background: color.adjust($ui-highlight-color, $lightness: 4%);
     }
   }
 }

app/javascript/flavours/glitch/styles/components/domains.scss

@@ -1,6 +1,9 @@
+@use "sass:color";
+@use "../variables" as *;
+
 .domain {
   padding: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   .domain__domain-name {
     flex: 1 1 auto;

app/javascript/flavours/glitch/styles/components/doodle.scss

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

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .drawer {
   display: flex;
   gap: var(--size-layout-gap);
@@ -96,7 +100,7 @@
   &:focus-visible,
   &:hover,
   &.active {
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
   }
 }
 
@@ -163,15 +167,15 @@
 }
 
 .search-results__section {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   &:last-child {
     border-bottom: 0;
   }
 
   &__header {
-    background: darken($ui-base-color, 4%);
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     padding: 15px;
     font-weight: 500;
     font-size: 14px;
@@ -212,7 +216,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: lighten($secondary-text-color, 4%);
+      color: color.adjust($secondary-text-color, $lightness: 4%);
       text-decoration: underline;
     }
   }
@@ -249,7 +253,7 @@
 }
 
 .drawer__inner__mastodon {
-  background: lighten($ui-base-color, 4%)
+  background: color.adjust($ui-base-color, $lightness: 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;
@@ -280,7 +284,7 @@
 }
 
 .pseudo-drawer {
-  background: lighten($ui-base-color, 13%);
+  background: color.adjust($ui-base-color, $lightness: 13%);
   font-size: 13px;
   text-align: start;
 }
@@ -304,7 +308,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 4%);
+        color.adjust($ui-base-color, $lightness: 4%);
     } @else {
       background:
         url("~flavours/glitch/images/wave-drawer-glitched.png")
@@ -312,7 +316,7 @@
           bottom /
           100%
           auto,
-        lighten($ui-base-color, 4%);
+        color.adjust($ui-base-color, $lightness: 4%);
     }
 
     & > .mastodon {

app/javascript/flavours/glitch/styles/components/emoji.scss

@@ -1,3 +1,6 @@
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .emojione {
   font-size: inherit;
   vertical-align: middle;

app/javascript/flavours/glitch/styles/components/emoji_picker.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .emoji-mart {
   &,
   * {
@@ -15,7 +19,7 @@
 }
 
 .emoji-mart-bar {
-  border: 0 solid darken($ui-secondary-color, 8%);
+  border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%);
 
   &:first-child {
     border-bottom-width: 1px;
@@ -52,7 +56,7 @@
   border: 0;
 
   &:hover {
-    color: darken($lighter-text-color, 4%);
+    color: color.adjust($lighter-text-color, $lightness: -4%);
   }
 }
 
@@ -60,7 +64,7 @@
   color: $highlight-text-color;
 
   &:hover {
-    color: darken($highlight-text-color, 4%);
+    color: color.adjust($highlight-text-color, $lightness: -4%);
   }
 
   .emoji-mart-anchor-bar {
@@ -74,7 +78,7 @@
   inset-inline-start: 0;
   width: 100%;
   height: 3px;
-  background-color: darken($ui-highlight-color, 3%);
+  background-color: color.adjust($ui-highlight-color, $lightness: -3%);
 }
 
 .emoji-mart-anchors {

app/javascript/flavours/glitch/styles/components/explore.scss

@@ -1,9 +1,13 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .account-card__header {
   position: relative;
 }
 
 .explore__search-header {
-  background: darken($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: -4%);
   justify-content: center;
   align-items: center;
   padding: 15px;
@@ -14,12 +18,12 @@
   }
 
   .search__input {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     padding: 10px;
   }
 
   .search__popout {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   }
 
   .search .fa {
@@ -45,7 +49,7 @@
   color: $primary-text-color;
   text-decoration: none;
   padding: 15px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   gap: 15px;
 
   &:last-child {

app/javascript/flavours/glitch/styles/components/index.scss

@@ -1,26 +1,26 @@
-@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";
+@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";

app/javascript/flavours/glitch/styles/components/lists.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .list-editor {
   background: $ui-base-color;
   flex-direction: column;
@@ -12,7 +16,7 @@
 
   h4 {
     padding: 15px 0;
-    background: lighten($ui-base-color, 13%);
+    background: color.adjust($ui-base-color, $lightness: 13%);
     font-weight: 500;
     font-size: 16px;
     text-align: center;
@@ -65,11 +69,11 @@
   }
 
   &__account {
-    background: lighten($ui-base-color, 13%);
+    background: color.adjust($ui-base-color, $lightness: 13%);
   }
 
   &__lists {
-    background: lighten($ui-base-color, 13%);
+    background: color.adjust($ui-base-color, $lightness: 13%);
     height: 50vh;
     border-radius: 0 0 8px 8px;
     overflow-y: auto;
@@ -77,7 +81,7 @@
 
   .list {
     padding: 10px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   }
 
   .list__wrapper {

app/javascript/flavours/glitch/styles/components/local_settings.scss

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

app/javascript/flavours/glitch/styles/components/media.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .video-error-cover {
   align-items: center;
   background: $base-overlay-background;
@@ -23,7 +27,7 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($darker-text-color, 8%);
+    color: color.adjust($darker-text-color, $lightness: 8%);
   }
 
   .status__content > & {
@@ -385,7 +389,7 @@
   overflow: hidden;
   box-sizing: border-box;
   position: relative;
-  background: darken($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: -8%);
   border-radius: 4px;
   padding-bottom: 44px;
   width: 100%;
@@ -554,7 +558,7 @@
       &:hover,
       &:active,
       &:focus {
-        color: lighten($darker-text-color, 7%);
+        color: color.adjust($darker-text-color, $lightness: 7%);
       }
     }
 
@@ -690,7 +694,7 @@
       inset-inline-start: 0;
       top: 50%;
       transform: translate(0, -50%);
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, $lightness: 8%);
     }
 
     &__handle {
@@ -703,7 +707,7 @@
       inset-inline-start: 0;
       margin-inline-start: -6px;
       transform: translate(0, -50%);
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, $lightness: 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       opacity: 0;
 
@@ -757,7 +761,7 @@
       height: 4px;
       border-radius: 4px;
       top: 14px;
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, $lightness: 8%);
     }
 
     &__buffer {
@@ -773,7 +777,7 @@
       height: 12px;
       top: 10px;
       margin-inline-start: -6px;
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, $lightness: 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
       .no-reduce-motion & {

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .app-body {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -169,7 +173,7 @@
   &:hover,
   &:active,
   &:focus-visible {
-    color: lighten($action-button-color, 7%);
+    color: color.adjust($action-button-color, $lightness: 7%);
     background-color: rgba($action-button-color, 0.15);
     transition: all 200ms ease-out;
     transition-property: background-color, color;
@@ -214,7 +218,7 @@
     &:hover,
     &:active,
     &:focus-visible {
-      color: darken($lighter-text-color, 7%);
+      color: color.adjust($lighter-text-color, $lightness: -7%);
       background-color: rgba($lighter-text-color, 0.15);
     }
 
@@ -230,7 +234,7 @@
       color: $highlight-text-color;
 
       &.disabled {
-        color: lighten($highlight-text-color, 13%);
+        color: color.adjust($highlight-text-color, $lightness: 13%);
       }
     }
   }
@@ -288,7 +292,7 @@
   &:hover,
   &:active,
   &:focus-visible {
-    color: darken($lighter-text-color, 7%);
+    color: color.adjust($lighter-text-color, $lightness: -7%);
     background-color: rgba($lighter-text-color, 0.15);
     transition: all 200ms ease-out;
     transition-property: background-color, color;
@@ -299,7 +303,7 @@
   }
 
   &.disabled {
-    color: lighten($lighter-text-color, 20%);
+    color: color.adjust($lighter-text-color, $lightness: 20%);
     background-color: transparent;
     cursor: default;
   }
@@ -701,7 +705,7 @@ body > [data-popper-placement] {
 .tabs-bar {
   box-sizing: border-box;
   display: flex;
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   flex: 0 0 auto;
   overflow-y: auto;
 }
@@ -716,7 +720,7 @@ body > [data-popper-placement] {
   text-align: center;
   font-size: 14px;
   font-weight: 500;
-  border-bottom: 2px solid lighten($ui-base-color, 8%);
+  border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 8%);
   transition: all 50ms linear;
   transition-property: border-bottom, background, color;
 
@@ -729,8 +733,8 @@ body > [data-popper-placement] {
   &:focus,
   &:active {
     @include multi-columns("screen and (min-width: 631px)") {
-      background: lighten($ui-base-color, 14%);
-      border-bottom-color: lighten($ui-base-color, 14%);
+      background: color.adjust($ui-base-color, $lightness: 14%);
+      border-bottom-color: color.adjust($ui-base-color, $lightness: 14%);
     }
   }
 
@@ -758,7 +762,7 @@ body > [data-popper-placement] {
     inset-inline-start: 9px;
     top: -13px;
     background: $ui-highlight-color;
-    border: 2px solid lighten($ui-base-color, 8%);
+    border: 2px solid color.adjust($ui-base-color, $lightness: 8%);
     padding: 1px 6px;
     border-radius: 6px;
     font-size: 10px;
@@ -780,7 +784,7 @@ body > [data-popper-placement] {
 }
 
 .column-link--transparent .icon-with-badge__badge {
-  border-color: darken($ui-base-color, 8%);
+  border-color: color.adjust($ui-base-color, $lightness: -8%);
 }
 
 .scrollable {
@@ -861,11 +865,11 @@ body > [data-popper-placement] {
 
 .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
   .react-toggle-track {
-  background-color: darken($ui-base-color, 10%);
+  background-color: color.adjust($ui-base-color, $lightness: -10%);
 }
 
 .react-toggle--checked .react-toggle-track {
-  background-color: darken($ui-highlight-color, 2%);
+  background-color: color.adjust($ui-highlight-color, $lightness: -2%);
 }
 
 .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
@@ -918,7 +922,7 @@ body > [data-popper-placement] {
   height: 22px;
   border: 1px solid $ui-base-color;
   border-radius: 50%;
-  background-color: darken($simple-background-color, 2%);
+  background-color: color.adjust($simple-background-color, $lightness: -2%);
   box-sizing: border-box;
   transition: all 0.25s ease;
   transition-property: border-color, left;
@@ -963,7 +967,7 @@ body > [data-popper-placement] {
     margin-top: 10px;
 
     h4 {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
       padding: 10px;
       font-size: 12px;
       text-transform: uppercase;
@@ -1029,8 +1033,8 @@ body > [data-popper-placement] {
   kbd {
     display: inline-block;
     padding: 3px 5px;
-    background-color: lighten($ui-base-color, 8%);
-    border: 1px solid darken($ui-base-color, 4%);
+    background-color: color.adjust($ui-base-color, $lightness: 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -4%);
   }
 }
 
@@ -1059,7 +1063,7 @@ body > [data-popper-placement] {
 
   &.light {
     color: $inverted-text-color;
-    border-bottom: 2px solid lighten($ui-base-color, 27%);
+    border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 27%);
 
     &:focus,
     &:active {
@@ -1093,7 +1097,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .reduce-motion button.icon-button.disabled i.fa-retweet {
-  color: darken($action-button-color, 13%);
+  color: color.adjust($action-button-color, $lightness: -13%);
 }
 
 .load-more {
@@ -1112,12 +1116,12 @@ button.icon-button.active i.fa-retweet {
   text-decoration: none;
 
   &:hover {
-    background: lighten($ui-base-color, 2%);
+    background: color.adjust($ui-base-color, $lightness: 2%);
   }
 }
 
 .load-gap {
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .timeline-hint {
@@ -1140,7 +1144,7 @@ button.icon-button.active i.fa-retweet {
     &:focus,
     &:active {
       text-decoration: underline;
-      color: lighten($highlight-text-color, 4%);
+      color: color.adjust($highlight-text-color, $lightness: 4%);
     }
   }
 }
@@ -1177,8 +1181,8 @@ button.icon-button.active i.fa-retweet {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: lighten($ui-base-color, 8%);
-    border-inline-start: 1px solid lighten($ui-base-color, 20%);
+    background: color.adjust($ui-base-color, $lightness: 8%);
+    border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%);
     box-shadow: 0 0 5px black;
     border-bottom: 1px solid $ui-base-color;
   }
@@ -1232,7 +1236,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .circular-progress {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, $lightness: 26%);
   animation: 1.4s linear 0s infinite normal none running simple-rotate;
 
   circle {
@@ -1524,12 +1528,12 @@ button.icon-button.active i.fa-retweet {
 
 .conversation {
   display: flex;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   padding: 5px;
   padding-bottom: 0;
 
   &:focus {
-    background: lighten($ui-base-color, 2%);
+    background: color.adjust($ui-base-color, $lightness: 2%);
     outline: 0;
   }
 
@@ -1597,10 +1601,10 @@ button.icon-button.active i.fa-retweet {
   }
 
   &--unread {
-    background: lighten($ui-base-color, 2%);
+    background: color.adjust($ui-base-color, $lightness: 2%);
 
     &:focus {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
     }
 
     .conversation__content__info {

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -1,5 +1,9 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .modal-container--preloader {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .modal-root {
@@ -134,7 +138,7 @@
 .onboarding-modal__paginator,
 .error-modal__footer {
   flex: 0 0 auto;
-  background: darken($ui-secondary-color, 8%);
+  background: color.adjust($ui-secondary-color, $lightness: -8%);
   display: flex;
   padding: 25px;
 
@@ -158,8 +162,8 @@
     &:hover,
     &:focus,
     &:active {
-      color: darken($lighter-text-color, 4%);
-      background-color: darken($ui-secondary-color, 16%);
+      color: color.adjust($lighter-text-color, $lightness: -4%);
+      background-color: color.adjust($ui-secondary-color, $lightness: -16%);
     }
 
     &.onboarding-modal__done,
@@ -169,7 +173,7 @@
       &:hover,
       &:focus,
       &:active {
-        color: lighten($inverted-text-color, 4%);
+        color: color.adjust($inverted-text-color, $lightness: 4%);
       }
     }
   }
@@ -190,17 +194,17 @@
   width: 14px;
   height: 14px;
   border-radius: 14px;
-  background: darken($ui-secondary-color, 16%);
+  background: color.adjust($ui-secondary-color, $lightness: -16%);
   margin: 0 3px;
   cursor: pointer;
 
   &:hover {
-    background: darken($ui-secondary-color, 18%);
+    background: color.adjust($ui-secondary-color, $lightness: -18%);
   }
 
   &.active {
     cursor: default;
-    background: darken($ui-secondary-color, 24%);
+    background: color.adjust($ui-secondary-color, $lightness: -24%);
   }
 }
 
@@ -231,7 +235,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: lighten($highlight-text-color, 4%);
+      color: color.adjust($highlight-text-color, $lightness: 4%);
     }
   }
 
@@ -329,7 +333,7 @@
   }
 
   .figure {
-    background: darken($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: -8%);
     color: $secondary-text-color;
     margin-bottom: 20px;
     border-radius: 4px;
@@ -421,7 +425,7 @@
 .mute-modal,
 .block-modal,
 .compare-history-modal {
-  background: lighten($ui-secondary-color, 8%);
+  background: color.adjust($ui-secondary-color, $lightness: 8%);
   color: $inverted-text-color;
   border-radius: 8px;
   overflow: hidden;
@@ -455,7 +459,7 @@
   }
 
   .status__content__spoiler-link {
-    color: lighten($secondary-text-color, 8%);
+    color: color.adjust($secondary-text-color, $lightness: 8%);
   }
 }
 
@@ -537,7 +541,7 @@
   max-width: 90vw;
   width: 480px;
   height: 80vh;
-  background: lighten($ui-secondary-color, 8%);
+  background: color.adjust($ui-secondary-color, $lightness: 8%);
   color: $inverted-text-color;
   border-radius: 8px;
   overflow: hidden;
@@ -577,7 +581,7 @@
   &__lead {
     font-size: 17px;
     line-height: 22px;
-    color: lighten($inverted-text-color, 16%);
+    color: color.adjust($inverted-text-color, $lightness: 16%);
     margin-bottom: 30px;
 
     a {
@@ -620,7 +624,7 @@
     background: $ui-primary-color;
 
     &:hover {
-      background: lighten($ui-primary-color, 8%);
+      background: color.adjust($ui-primary-color, $lightness: 8%);
     }
   }
 
@@ -639,7 +643,7 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($inverted-text-color, 15%);
+      border-color: color.adjust($inverted-text-color, $lightness: 15%);
       border-width: 4px;
     }
 
@@ -660,7 +664,7 @@
 
     & > .poll__option__text {
       font-size: 13px;
-      color: lighten($inverted-text-color, 16%);
+      color: color.adjust($inverted-text-color, $lightness: 16%);
 
       strong {
         font-size: 17px;
@@ -829,7 +833,7 @@
     margin-bottom: 10px;
 
     &:focus {
-      border: 1px solid darken($ui-secondary-color, 8%);
+      border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%);
     }
 
     &__wrapper {
@@ -978,7 +982,7 @@
   &:hover,
   &:focus,
   &:active {
-    color: darken($lighter-text-color, 4%);
+    color: color.adjust($lighter-text-color, $lightness: -4%);
     background-color: transparent;
   }
 }
@@ -1022,9 +1026,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(darken($simple-background-color, 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(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
       no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
+    border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
     border-radius: 4px;
     padding: 6px 10px;
     padding-inline-end: 30px;
@@ -1159,7 +1163,7 @@
       }
 
       &:focus {
-        background: lighten($ui-base-color, 4%);
+        background: color.adjust($ui-base-color, $lightness: 4%);
       }
 
       @media screen and (width <= 600px) {
@@ -1364,7 +1368,7 @@ img.modal-warning {
     &__input {
       @include search-input;
 
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
       padding: 4px 6px;
       color: $primary-text-color;
       font-size: 16px;
@@ -1381,7 +1385,7 @@ img.modal-warning {
         flex: 1 1 auto;
 
         &::placeholder {
-          color: lighten($darker-text-color, 4%);
+          color: color.adjust($darker-text-color, $lightness: 4%);
         }
 
         &:focus {
@@ -1398,12 +1402,12 @@ img.modal-warning {
       margin-top: -1px;
       padding-top: 5px;
       padding-bottom: 5px;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     }
 
     &.focused &__input {
       border-color: $highlight-text-color;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
     }
 
     &.invalid &__input {
@@ -1471,7 +1475,7 @@ img.modal-warning {
   input {
     display: block;
     font-family: inherit;
-    background: darken($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: -8%);
     border: 1px solid $highlight-text-color;
     color: $darker-text-color;
     border-radius: 4px;
@@ -1484,7 +1488,7 @@ img.modal-warning {
 
     &:focus {
       outline: 0;
-      background: darken($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: -4%);
     }
   }
 

app/javascript/flavours/glitch/styles/components/privacy_policy.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .privacy-policy {
   background: $ui-base-color;
   padding: 20px;
@@ -169,14 +173,14 @@
 
   code {
     font-size: 0.875em;
-    background: darken($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: -8%);
     border-radius: 4px;
     padding: 0.2em 0.3em;
   }
 
   hr {
     border: 0;
-    border-top: 1px solid lighten($ui-base-color, 4%);
+    border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
     margin-top: 3em;
     margin-bottom: 3em;
   }

app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss

@@ -1,3 +1,6 @@
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .regeneration-indicator {
   text-align: center;
   font-size: 16px;

app/javascript/flavours/glitch/styles/components/scrollbars.scss

@@ -1,6 +1,10 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 /* Scrollbars */
 html {
-  scrollbar-color: lighten($ui-base-color, 4%)
+  scrollbar-color: color.adjust($ui-base-color, $lightness: 4%)
     rgba($base-overlay-background, 0.1);
 }
 
@@ -10,17 +14,17 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
   border: 0 none $base-border-color;
   border-radius: 50px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: lighten($ui-base-color, 6%);
+  background: color.adjust($ui-base-color, $lightness: 6%);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
 }
 
 ::-webkit-scrollbar-track {

app/javascript/flavours/glitch/styles/components/search.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .search {
   position: relative;
 }
@@ -55,7 +59,7 @@
 
   &:focus-visible,
   &:hover {
-    background: darken($ui-base-color, 10%);
+    background: color.adjust($ui-base-color, $lightness: -10%);
   }
 }
 
@@ -168,7 +172,7 @@
   color: $dark-text-color;
   font-weight: 500;
   font-size: 16px;
-  background: lighten($ui-base-color, 2%);
+  background: color.adjust($ui-base-color, $lightness: 2%);
   cursor: default;
 }
 
@@ -181,8 +185,8 @@
 .trends {
   &__header {
     color: $dark-text-color;
-    background: lighten($ui-base-color, 2%);
-    border-bottom: 1px solid darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 2%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%);
     font-weight: 500;
     padding: 15px;
     font-size: 16px;
@@ -198,7 +202,7 @@
     display: flex;
     align-items: center;
     padding: 15px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     gap: 15px;
 
     &:last-child {
@@ -255,7 +259,7 @@
       }
 
       path:last-child {
-        stroke: lighten($highlight-text-color, 6%) !important;
+        stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
         fill: none !important;
       }
     }
@@ -279,31 +283,37 @@
         }
 
         path:last-child {
-          stroke: lighten($gold-star, 6%) !important;
+          stroke: color.adjust($gold-star, $lightness: 6%) !important;
         }
       }
     }
 
     &--disabled {
       .trends__item__name {
-        color: lighten($ui-base-color, 12%);
+        color: color.adjust($ui-base-color, $lightness: 12%);
 
         a {
-          color: lighten($ui-base-color, 12%);
+          color: color.adjust($ui-base-color, $lightness: 12%);
         }
       }
 
       .trends__item__current {
-        color: lighten($ui-base-color, 12%);
+        color: color.adjust($ui-base-color, $lightness: 12%);
       }
 
       .trends__item__sparkline {
         path:first-child {
-          fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
+          fill: rgba(
+            color.adjust($ui-base-color, $lightness: 12%),
+            0.25
+          ) !important;
         }
 
         path:last-child {
-          stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
+          stroke: color.adjust(
+            color.adjust($ui-base-color, $lightness: 12%),
+            $lightness: 6%
+          ) !important;
         }
       }
     }

app/javascript/flavours/glitch/styles/components/sensitive.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .sensitive-info {
   display: flex;
   flex-direction: row;

app/javascript/flavours/glitch/styles/components/signed_out.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .sign-in-banner {
   padding: 10px;
 
@@ -14,7 +18,7 @@
         text-decoration: underline;
 
         .fa {
-          color: lighten($dark-text-color, 7%);
+          color: color.adjust($dark-text-color, $lightness: 7%);
         }
       }
     }

app/javascript/flavours/glitch/styles/components/single_column.scss

@@ -1,3 +1,8 @@
+@use "sass:color";
+@use "columns" as *;
+@use "../mixins" as *;
+@use "../variables" as *;
+
 .compose-panel {
   width: 285px;
   margin-top: 10px;
@@ -78,7 +83,7 @@
     flex: 0 0 auto;
     border: 0;
     background: transparent;
-    border-top: 1px solid lighten($ui-base-color, 4%);
+    border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
     margin: 10px 0;
   }
 
@@ -260,7 +265,8 @@
     .navigation-panel {
       margin: 0;
       background: $ui-base-color;
-      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      border-inline-start: 1px solid
+        color.adjust($ui-base-color, $lightness: 8%);
       height: 100vh;
     }
 
@@ -278,7 +284,7 @@
   .layout-single-column .ui__header {
     display: flex;
     background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   }
 
   .layout-single-column {

app/javascript/flavours/glitch/styles/components/status.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "../mixins" as *;
+@use "../variables" as *;
+
 @keyframes spring-flip-in {
   0% {
     transform: rotate(0deg);
@@ -85,7 +89,7 @@
       text-decoration: underline;
 
       .fa {
-        color: lighten($dark-text-color, 7%);
+        color: color.adjust($dark-text-color, $lightness: 7%);
       }
     }
 
@@ -149,7 +153,7 @@
   box-sizing: border-box;
   width: 100%;
   clear: both;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .notification-follow,
@@ -157,7 +161,7 @@
   position: relative;
 
   // same like Status
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   .account {
     border-bottom: 0 none;
@@ -167,7 +171,7 @@
 .focusable {
   &:focus {
     outline: 0;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
 
     &.status.status-direct.muted {
       background: transparent;
@@ -175,7 +179,7 @@
 
     .detailed-status,
     .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: 8%);
     }
   }
 }
@@ -187,7 +191,7 @@
   padding: 15px;
   position: relative;
   height: auto;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   cursor: auto;
 
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -215,9 +219,9 @@
   }
 
   &.status-direct {
-    --color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};
+    --color-status-bg: #{color.mix($ui-base-color, $ui-highlight-color, 95%)};
 
-    border-bottom-color: lighten($ui-base-color, 12%);
+    border-bottom-color: color.adjust($ui-base-color, $lightness: 12%);
   }
 
   &.light {
@@ -249,7 +253,7 @@
         background: $ui-primary-color;
 
         &:hover {
-          background: lighten($ui-primary-color, 8%);
+          background: color.adjust($ui-primary-color, $lightness: 8%);
         }
       }
     }
@@ -308,15 +312,15 @@
 
     &:focus > .status__content::after {
       background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
+        rgba(color.adjust($ui-base-color, $lightness: 4%), 0),
+        rgba(color.adjust($ui-base-color, $lightness: 4%), 1)
       );
     }
 
     &.status-direct > .status__content::after {
       background: linear-gradient(
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
+        rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0),
+        rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1)
       );
     }
 
@@ -339,7 +343,7 @@
     background: transparent;
 
     .icon-button.disabled {
-      color: lighten($action-button-color, 13%);
+      color: color.adjust($action-button-color, $lightness: 13%);
     }
   }
 }
@@ -380,7 +384,7 @@
   padding: 0 10px;
 
   .detailed-status__display-name {
-    color: lighten($inverted-text-color, 16%);
+    color: color.adjust($inverted-text-color, $lightness: 16%);
 
     span {
       display: inline;
@@ -446,9 +450,9 @@
 }
 
 .detailed-status {
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
   padding: 14px 10px;
-  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   &--flex {
     display: flex;
@@ -487,9 +491,9 @@
 }
 
 .detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  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%);
   display: flex;
   flex-direction: row;
   padding: 10px 0;
@@ -606,7 +610,7 @@ a.status__display-name,
 
     &:hover,
     &:focus {
-      background: lighten($ui-base-color, 29%);
+      background: color.adjust($ui-base-color, $lightness: 29%);
       text-decoration: none;
     }
   }
@@ -623,7 +627,7 @@ a.status__display-name,
   position: relative;
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   border-radius: 4px;
   color: $dark-text-color;
   margin-top: 14px;
@@ -685,7 +689,7 @@ a.status-card {
   cursor: pointer;
 
   &:hover {
-    background: lighten($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: 8%);
   }
 }
 
@@ -746,7 +750,7 @@ a.status-card {
 
 .status-card__image {
   flex: 0 0 100px;
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   position: relative;
 
   & > .fa {
@@ -777,7 +781,7 @@ a.status-card {
 }
 
 .status-card.compact {
-  border-color: lighten($ui-base-color, 4%);
+  border-color: color.adjust($ui-base-color, $lightness: 4%);
 
   &.interactive {
     border: 0;
@@ -798,7 +802,7 @@ a.status-card {
 }
 
 a.status-card.compact:hover {
-  background-color: lighten($ui-base-color, 4%);
+  background-color: color.adjust($ui-base-color, $lightness: 4%);
 }
 
 .status-card__image-image {
@@ -833,7 +837,7 @@ a.status-card.compact:hover {
 .attachment-list {
   display: flex;
   font-size: 14px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   border-radius: 4px;
   margin-top: 14px;
   overflow: hidden;
@@ -843,7 +847,7 @@ a.status-card.compact:hover {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-inline-end: 1px solid lighten($ui-base-color, 8%);
+    border-inline-end: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -896,7 +900,7 @@ a.status-card.compact:hover {
 
 .status__wrapper--filtered__button {
   display: inline;
-  color: lighten($ui-highlight-color, 8%);
+  color: color.adjust($ui-highlight-color, $lightness: 8%);
   border: 0;
   background: transparent;
   padding: 0;
@@ -937,12 +941,12 @@ a.status-card.compact:hover {
   }
 
   &--first-in-thread {
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   }
 
   &__line {
     height: 10px - 4px;
-    border-inline-start: 2px solid lighten($ui-base-color, 8%);
+    border-inline-start: 2px solid color.adjust($ui-base-color, $lightness: 8%);
     width: 0;
     position: absolute;
     top: 0;
@@ -988,7 +992,7 @@ a.status-card.compact:hover {
 
   &__footer {
     border-radius: 0 0 4px 4px;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
     padding: 10px;
     padding-top: 12px;
     display: flex;
@@ -997,7 +1001,7 @@ a.status-card.compact:hover {
 
   &__header {
     border-radius: 4px 4px 0 0;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
     padding: 10px;
     display: flex;
     justify-content: space-between;
@@ -1037,7 +1041,7 @@ a.status-card.compact:hover {
 
 .picture-in-picture-placeholder {
   box-sizing: border-box;
-  border: 2px dashed lighten($ui-base-color, 8%);
+  border: 2px dashed color.adjust($ui-base-color, $lightness: 8%);
   background: $base-shadow-color;
   display: flex;
   flex-direction: column;
@@ -1060,6 +1064,6 @@ a.status-card.compact:hover {
   &:hover,
   &:focus,
   &:active {
-    border-color: lighten($ui-base-color, 12%);
+    border-color: color.adjust($ui-base-color, $lightness: 12%);
   }
 }

app/javascript/flavours/glitch/styles/containers.scss

@@ -1,3 +1,6 @@
+@use "mixins" as *;
+@use "variables" as *;
+
 .container-alt {
   width: 700px;
   margin: 0 auto;

app/javascript/flavours/glitch/styles/contrast.scss

@@ -1,3 +1,3 @@
-@import "contrast/variables";
-@import "index";
-@import "contrast/diff";
+@use "contrast/variables";
+@use "index";
+@use "contrast/diff";

app/javascript/flavours/glitch/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;

app/javascript/flavours/glitch/styles/dashboard.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;
@@ -13,7 +17,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 +31,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
   }
@@ -99,12 +103,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;
     }
 

app/javascript/flavours/glitch/styles/forms.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 $no-columns-breakpoint: 600px;
 
 code {
@@ -164,7 +168,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 +296,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 +439,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 +457,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 +474,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 +490,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 +588,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 +632,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 +648,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 +729,7 @@ code {
     }
 
     &:focus {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
     }
   }
 
@@ -809,7 +813,7 @@ code {
     &:hover,
     &:focus,
     &:active {
-      color: lighten($highlight-text-color, 8%);
+      color: color.adjust($highlight-text-color, $lightness: 8%);
     }
   }
 }
@@ -855,7 +859,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 +1009,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 +1071,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;
 

app/javascript/flavours/glitch/styles/gts.scss

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

app/javascript/flavours/glitch/styles/gts/_config.scss

@@ -6,8 +6,8 @@
 */
 
 /* 🛠️ Config */
-@import "colors";
-@import "sizes";
+@use "colors";
+@use "sizes";
 
 /* 🧩 Components */
-@import "status";
+@use "status";

app/javascript/flavours/glitch/styles/gts/status.scss

@@ -1,10 +1,10 @@
 /* 🚥 Status */
-@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";
+@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";
 
 .status {
     background-color: var(--color-status-bg);

app/javascript/flavours/glitch/styles/index.scss

@@ -1,28 +1,28 @@
-@import "mixins";
-@import "variables";
-@import "styles/fonts/roboto";
-@import "styles/fonts/roboto-mono";
+@use "mixins";
+@use "variables";
+@use "styles/fonts/roboto";
+@use "styles/fonts/roboto-mono";
 
-@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 "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 "gts";
-@import "gts/config";
-@import "tangerine/config";
+@use "gts";
+@use "gts/config";
+@use "tangerine/config" as tangerine;

app/javascript/flavours/glitch/styles/login.scss

@@ -1,5 +1,6 @@
-@import "styles/fonts/roboto";
-@import "reset";
+@use "sass:color";
+@use "styles/fonts/roboto";
+@use "reset";
 
 :root {
     --color-bg: #191b22;
@@ -70,7 +71,7 @@ button:focus-visible {
 
 button {
     padding: 7px 10px;
-    border: 1px solid lighten(#66befe, 7%);
+    border: 1px solid color.scale(#66befe, $lightness: 7%);
     border-radius: 4px;
     box-sizing: border-box;
     color: #2a2b2f;
@@ -95,7 +96,7 @@ input[type="text"] {
     display: block;
     margin: 0;
     padding: 15px;
-    border: 1px solid lighten(#282c37, 7%);
+    border: 1px solid color.scale(#282c37, $lightness: 7%);
     border-radius: 4px;
     box-sizing: border-box;
     box-shadow: none;
@@ -109,7 +110,7 @@ input[type="text"] {
 .content {
     padding: 15px;
     border-radius: 4px;
-    border: 1px solid lighten(#39404f, 7%);
+    border: 1px solid color.scale(#39404f, $lightness: 7%);
     color: #fff;
     background-color: #39404f;
 }

app/javascript/flavours/glitch/styles/mastodon-light.scss

@@ -1,4 +1,4 @@
-@import "mastodon-light/variables";
-@import "index";
-@import "mastodon-light/diff";
-@import "mastodon-light/colors";
+@use "mastodon-light/variables";
+@use "index";
+@use "mastodon-light/diff";
+@use "mastodon-light/colors";

app/javascript/flavours/glitch/styles/mastodon-light/colors.scss

@@ -16,6 +16,9 @@
   /* Secondary */
   --color-secondary-fg: #606984;
 
+  /* Account */
+  --color-account-bg: #fff;
+
   /* Drawer */
   --color-drawer-bg: #fff;
   --color-drawer-bg--hover: #ccd7e0;

app/javascript/flavours/glitch/styles/mastodon-light/diff.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "../variables" as *;
+
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.
 
@@ -26,23 +29,23 @@ html {
 .column-inline-form,
 .regeneration-indicator {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   border-top: 0;
 }
 
 .error-column {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .column > .scrollable.about {
-  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .about__meta,
 .about__section__title,
 .interaction-modal {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .rules-list li::before {
@@ -50,12 +53,12 @@ html {
 }
 
 .directory__card__img {
-  background: lighten($ui-base-color, 12%);
+  background: color.adjust($ui-base-color, $lightness: 12%);
 }
 
 .filter-form {
   background: $white;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .column-back-button,
@@ -103,7 +106,7 @@ html {
 .confirmation-modal__cancel-button,
 .mute-modal__cancel-button,
 .block-modal__cancel-button {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, $lightness: 26%);
 
   &:hover,
   &:focus,
@@ -113,15 +116,15 @@ html {
 }
 
 .column-subheading {
-  background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: -4%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .getting-started,
 .scrollable {
   .column-link {
     background: $white;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
     &:hover,
     &:active,
@@ -132,8 +135,8 @@ html {
 }
 
 .getting-started .navigation-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($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%);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
@@ -148,7 +151,7 @@ html {
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .report-dialog-modal .dialog-option .poll__input {
@@ -169,18 +172,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(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, $lightness: 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
 }
 
 .compose-form__poll-wrapper,
 .compose-form__poll-wrapper .poll__footer {
-  border-top-color: lighten($ui-base-color, 8%);
+  border-top-color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .compose-form .compose-form__buttons-wrapper {
   background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   border-top: 0;
 }
 
@@ -195,7 +198,7 @@ html {
   .compose-form__modifiers {
     .compose-form__upload__actions .icon-button,
     .compose-form__upload__warning .icon-button {
-      color: lighten($white, 7%);
+      color: color.adjust($white, $lightness: 7%);
 
       &:active,
       &:focus,
@@ -206,11 +209,11 @@ html {
   }
 
   .compose-form__buttons-wrapper {
-    background: darken($ui-base-color, 6%);
+    background: color.adjust($ui-base-color, $lightness: -6%);
   }
 
   .autosuggest-textarea__suggestions {
-    background: darken($ui-base-color, 6%);
+    background: color.adjust($ui-base-color, $lightness: -6%);
   }
 
   .autosuggest-textarea__suggestions__item {
@@ -218,16 +221,16 @@ html {
     &:focus,
     &:active,
     &.selected {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
     }
   }
 }
 
 .emoji-mart-bar {
-  border-color: lighten($ui-base-color, 4%);
+  border-color: color.adjust($ui-base-color, $lightness: 4%);
 
   &:first-child {
-    background: darken($ui-base-color, 6%);
+    background: color.adjust($ui-base-color, $lightness: -6%);
   }
 }
 
@@ -242,7 +245,7 @@ html {
 
 // Change the background colors of statuses
 .focusable:focus {
-  background: lighten($white, 4%);
+  background: color.adjust($white, $lightness: 4%);
 }
 
 .detailed-status,
@@ -257,7 +260,7 @@ html {
 
   &:hover,
   &:focus {
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
   }
 }
 
@@ -320,12 +323,12 @@ html {
 
 .language-dropdown__dropdown__results__item
   .language-dropdown__dropdown__results__item__common-name {
-  color: lighten($ui-base-color, 8%);
+  color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .language-dropdown__dropdown__results__item.active
   .language-dropdown__dropdown__results__item__common-name {
-  color: darken($ui-base-color, 12%);
+  color: color.adjust($ui-base-color, $lightness: -12%);
 }
 
 .dropdown-menu__separator,
@@ -333,11 +336,11 @@ html {
 .dropdown-menu__container__header,
 .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, $lightness: 4%);
 }
 
 .report-dialog-modal__container {
-  border-top-color: lighten($ui-base-color, 4%);
+  border-top-color: color.adjust($ui-base-color, $lightness: 4%);
 }
 
 // Change the background colors of modals
@@ -359,7 +362,7 @@ html {
 .picture-in-picture__footer,
 .reactions-bar__item {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .reactions-bar__item:hover,
@@ -372,8 +375,12 @@ html {
 }
 
 .reactions-bar__item.active {
-  background-color: mix($white, $ui-highlight-color, 80%);
-  border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
+  background-color: color.mix($white, $ui-highlight-color, 80%);
+  border-color: color.mix(
+    color.adjust($ui-base-color, $lightness: 8%),
+    $ui-highlight-color,
+    80%
+  );
 }
 
 .media-modal__overlay .picture-in-picture__footer {
@@ -395,16 +402,16 @@ html {
 }
 
 .report-modal__comment {
-  border-right-color: lighten($ui-base-color, 8%);
+  border-right-color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .report-modal__container {
-  border-top-color: lighten($ui-base-color, 8%);
+  border-top-color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .column-header__collapsible-inner {
-  background: darken($ui-base-color, 4%);
-  border: 1px solid lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: -4%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   border-top: 0;
 }
 
@@ -419,7 +426,7 @@ html {
 }
 
 .flash-message.warning {
-  color: lighten($gold-star, 16%);
+  color: color.adjust($gold-star, $lightness: 16%);
 }
 
 .boost-modal__action-bar,
@@ -428,14 +435,14 @@ html {
 .block-modal__action-bar,
 .onboarding-modal__paginator,
 .error-modal__footer {
-  background: darken($ui-base-color, 6%);
+  background: color.adjust($ui-base-color, $lightness: -6%);
 
   .onboarding-modal__nav,
   .error-modal__nav {
     &:hover,
     &:focus,
     &:active {
-      background-color: darken($ui-base-color, 12%);
+      background-color: color.adjust($ui-base-color, $lightness: -12%);
     }
   }
 }
@@ -446,10 +453,10 @@ html {
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   &:focus {
-    border-color: lighten($ui-base-color, 12%);
+    border-color: color.adjust($ui-base-color, $lightness: 12%);
     background: $white;
   }
 }
@@ -459,12 +466,12 @@ html {
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: darken($ui-secondary-color, 10%);
+  background: color.adjust($ui-secondary-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
@@ -476,8 +483,8 @@ html {
 
 // 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%);
+  background: var(--color-account-bg);
+  border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .nothing-here,
@@ -485,7 +492,7 @@ html {
 .directory__tag > a,
 .directory__tag > div {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-left: 0;
@@ -501,15 +508,15 @@ html {
   input[type="password"],
   textarea {
     &:hover {
-      border-color: lighten($ui-base-color, 12%);
+      border-color: color.adjust($ui-base-color, $lightness: 12%);
     }
   }
 }
 
 .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 {
@@ -528,24 +535,24 @@ html {
   &__toolbar,
   &__row,
   .nothing-here {
-    border-color: lighten($ui-base-color, 8%);
+    border-color: color.adjust($ui-base-color, $lightness: 8%);
   }
 }
 
 .activity-stream {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 
   &--under-tabs {
     border-top: 0;
   }
 
   .entry {
-    background: $account-background-color;
+    background: var(--color-account-bg);
 
     .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%);
     }
   }
 
@@ -612,7 +619,7 @@ html {
 
 .reply-indicator {
   background: transparent;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .status__content,
@@ -636,9 +643,9 @@ html {
 }
 
 .mute-modal select {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 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(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, $lightness: 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
 }
 
@@ -650,15 +657,15 @@ html {
   &:not([disabled]) {
     &:hover,
     &:focus {
-      background: darken($ui-secondary-color, 10%);
+      background: color.adjust($ui-secondary-color, $lightness: -10%);
     }
 
     &.active {
-      background-color: darken($ui-highlight-color, 2%);
+      background-color: color.adjust($ui-highlight-color, $lightness: -2%);
 
       &:hover,
       &:focus {
-        background: lighten($ui-highlight-color, 10%);
+        background: color.adjust($ui-highlight-color, $lightness: 10%);
       }
     }
   }
@@ -666,16 +673,16 @@ html {
 
 .glitch.local-settings {
   background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .glitch.local-settings__navigation {
-  background: darken($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: -8%);
 }
 
 .glitch.local-settings__navigation__item {
-  background: darken($ui-base-color, 8%);
-  border-bottom: 1px lighten($ui-base-color, 8%) solid;
+  background: color.adjust($ui-base-color, $lightness: -8%);
+  border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid;
 
   &:hover {
     background: $ui-base-color;
@@ -705,8 +712,8 @@ html {
 
 .status.collapsed .status__content::after {
   background: linear-gradient(
-    rgba(darken($ui-base-color, 13%), 0),
-    rgba(darken($ui-base-color, 13%), 1)
+    rgba(color.adjust($ui-base-color, $lightness: -13%), 0),
+    rgba(color.adjust($ui-base-color, $lightness: -13%), 1)
   );
 }
 

app/javascript/flavours/glitch/styles/mastodon-light/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Dependent colors
 $black: #000000;
 $white: #ffffff;
@@ -14,7 +16,7 @@ $grey-600: #4e4c5a; // Trout
 $grey-100: #dadaf3; // Topaz
 
 // Differences
-$success-green: lighten(#3c754d, 8%);
+$success-green: color.adjust(#3c754d, $lightness: 8%);
 
 $base-overlay-background: $white !default;
 $valid-value-color: $success-green !default;
@@ -34,7 +36,10 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
-$highlight-text-color: darken($ui-highlight-color, 8%) !default;
+$highlight-text-color: color.adjust(
+  $ui-highlight-color,
+  $lightness: -8%
+) !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;
 
@@ -47,11 +52,19 @@ $account-background-color: $white !default;
 
 // Invert darkened and lightened colors
 @function darken($color, $amount) {
-  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+  @return hsl(
+    color.hue($color),
+    color.saturation($color),
+    color.lightness($color) + $amount
+  );
 }
 
 @function lighten($color, $amount) {
-  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+  @return hsl(
+    color.hue($color),
+    color.saturation($color),
+    color.lightness($color) - $amount
+  );
 }
 
 $emojis-requiring-inversion: "chains";

app/javascript/flavours/glitch/styles/modal.scss

@@ -1,3 +1,6 @@
+@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>')

app/javascript/flavours/glitch/styles/polls.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 .poll {
   margin-top: 16px;
   font-size: 14px;
@@ -16,7 +20,7 @@
   &__chart {
     border-radius: 4px;
     display: block;
-    background: darken($ui-primary-color, 5%);
+    background: color.adjust($ui-primary-color, $lightness: -5%);
     height: 5px;
     min-width: 1%;
 
@@ -47,17 +51,17 @@
     // duplication
     &::-moz-progress-bar {
       border-radius: 4px;
-      background: darken($ui-primary-color, 5%);
+      background: color.adjust($ui-primary-color, $lightness: -5%);
     }
 
     &::-ms-fill {
       border-radius: 4px;
-      background: darken($ui-primary-color, 5%);
+      background: color.adjust($ui-primary-color, $lightness: -5%);
     }
 
     &::-webkit-progress-value {
       border-radius: 4px;
-      background: darken($ui-primary-color, 5%);
+      background: color.adjust($ui-primary-color, $lightness: -5%);
     }
   }
 
@@ -94,7 +98,7 @@
       outline: 0;
       font-family: inherit;
       background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
+      border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
       border-radius: 4px;
       padding: 6px 10px;
 
@@ -136,7 +140,7 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($valid-value-color, 15%);
+      border-color: color.adjust($valid-value-color, $lightness: 15%);
       border-width: 4px;
     }
 
@@ -224,7 +228,7 @@
 }
 
 .compose-form__poll-wrapper {
-  border-top: 1px solid darken($simple-background-color, 8%);
+  border-top: 1px solid color.adjust($simple-background-color, $lightness: -8%);
   overflow-x: hidden;
 
   ul {
@@ -240,7 +244,8 @@
   }
 
   .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
+    border-top: 1px solid
+      color.adjust($simple-background-color, $lightness: -8%);
     padding: 10px;
     display: flex;
     align-items: center;
@@ -296,9 +301,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(darken($simple-background-color, 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(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
       no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
+    border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
     border-radius: 4px;
     padding: 6px 10px;
     padding-inline-end: 30px;
@@ -309,7 +314,7 @@
   color: $dark-text-color;
 
   &__chart {
-    background: rgba(darken($ui-primary-color, 14%), 0.7);
+    background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7);
 
     &.leading {
       background: rgba($ui-highlight-color, 0.5);

app/javascript/flavours/glitch/styles/rich_text.scss

@@ -1,3 +1,6 @@
+@use "mixins" as *;
+@use "variables" as *;
+
 .status__content__text,
 .e-content,
 .reply-indicator__content {

app/javascript/flavours/glitch/styles/rtl.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 body.rtl {
   direction: rtl;
 
@@ -94,15 +98,15 @@ body.rtl {
     &::after {
       background-image: linear-gradient(
         to left,
-        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%)
       );
     }
   }
 
   .simple_form 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, $lightness: 12%))}'/></svg>")
       no-repeat left 8px center / auto 16px;
   }
 

app/javascript/flavours/glitch/styles/statuses.scss

@@ -1,3 +1,7 @@
+@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;
@@ -69,7 +73,7 @@
   }
 
   &--highlighted .entry {
-    background: lighten($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: 8%);
   }
 }
 

app/javascript/flavours/glitch/styles/tables.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "mixins" as *;
+@use "variables" as *;
+
 .table {
   width: 100%;
   max-width: 100%;
@@ -11,7 +15,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 +82,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 +95,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 +192,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 +209,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 +248,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 +266,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 +359,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%);
     }
   }
 

app/javascript/flavours/glitch/styles/tangerine/_config.scss

@@ -4,7 +4,7 @@
 */
 
 /* 🛠️ Config */
-@import "keyframes";
+@use "keyframes";
 
 /* 🧩 Components */
-@import "status-bar";
+@use "status-bar";

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%)};
 }

app/javascript/flavours/glitch/styles/widgets.scss

@@ -1,4 +1,7 @@
+@use "sass:color";
 @use "sass:math";
+@use "mixins" as *;
+@use "variables" as *;
 
 .hero-widget {
   margin-bottom: 10px;
@@ -54,7 +57,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 +226,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
 
@@ -305,7 +308,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 {

app/javascript/skins/glitch/contrast/common.scss

@@ -1 +1 @@
-@import "flavours/glitch/styles/contrast";
+// @import "flavours/glitch/styles/contrast";

app/javascript/skins/glitch/mastodon-light/common.scss

@@ -1 +1 @@
-@import "flavours/glitch/styles/mastodon-light";
+// @import "flavours/glitch/styles/mastodon-light";

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@superseriousbusiness/folivora",
+  "name": "@mastodon/mastodon",
   "license": "AGPL-3.0-or-later",
   "engines": {
     "node": ">=16"
@@ -31,7 +31,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://codeberg.org/superseriousbusiness/masto-fe-standalone.git"
+    "url": "https://github.com/mastodon/mastodon.git"
   },
   "private": true,
   "dependencies": {
@@ -91,7 +91,7 @@
     "lodash": "^4.17.21",
     "mark-loader": "^0.1.6",
     "marky": "^1.2.5",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.9.4",
     "mkdirp": "^3.0.1",
     "npmlog": "^7.0.1",
     "path-complete-extname": "^1.0.0",

yarn.lock

@@ -2529,7 +2529,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     mark-loader: "npm:^0.1.6"
     marky: "npm:^1.2.5"
-    mini-css-extract-plugin: "npm:^1.6.2"
+    mini-css-extract-plugin: "npm:^2.9.4"
     mkdirp: "npm:^3.0.1"
     npmlog: "npm:^7.0.1"
     path-complete-extname: "npm:^1.0.0"
@@ -10950,16 +10950,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-css-extract-plugin@npm:^1.6.2":
-  version: 1.6.2
-  resolution: "mini-css-extract-plugin@npm:1.6.2"
+"mini-css-extract-plugin@npm:^2.9.4":
+  version: 2.9.4
+  resolution: "mini-css-extract-plugin@npm:2.9.4"
   dependencies:
-    loader-utils: "npm:^2.0.0"
-    schema-utils: "npm:^3.0.0"
-    webpack-sources: "npm:^1.1.0"
+    schema-utils: "npm:^4.0.0"
+    tapable: "npm:^2.2.1"
   peerDependencies:
-    webpack: ^4.4.0 || ^5.0.0
-  checksum: 10c0/138c008f8a510012266d2834227e75181feeffd09e89e9cde0a63f17be3d64ea3ddbba01036aac9c8a969462c0142285659a20c294e8d01ba948aa1124affdc2
+    webpack: ^5.0.0
+  checksum: 10c0/76f9e471784d52435ea766ce576ad23d37d0ea51c32ddc56414c8fdf14f7de44202dbc772cdf7549b7e54a5e56f569af93cfbd036d62d13ff8fd9571e53353b7
   languageName: node
   linkType: hard
 
@@ -15998,7 +15997,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-sources@npm:^1.1.0, webpack-sources@npm:^1.4.3":
+"webpack-sources@npm:^1.4.3":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
   dependencies: