diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 874c44240a4..d92012a1573 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -16,7 +16,7 @@
 
 .status-card__actions button,
 .status-card__actions a {
-  color: rgba($white, 0.8);
+  color: color.change($white, $alpha: 0.8);
 
   &:hover,
   &:active,
@@ -298,14 +298,14 @@
 .simple_form {
   .warning {
     box-shadow: none;
-    background: rgba($error-red, 0.5);
+    background: color.change($error-red, $alpha: 0.5);
     text-shadow: none;
   }
 
   .recommended {
     border-color: $ui-highlight-color;
     color: $ui-highlight-color;
-    background-color: rgba($ui-highlight-color, 0.1);
+    background-color: color.change($ui-highlight-color, $alpha: 0.1);
   }
 
   input[type='text'],
@@ -327,7 +327,7 @@
 
 .compose-form .compose-form__warning {
   border-color: $ui-highlight-color;
-  background-color: rgba($ui-highlight-color, 0.1);
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
 
   &,
   a {
@@ -375,10 +375,10 @@
 }
 
 .status__wrapper-direct {
-  background-color: rgba($ui-highlight-color, 0.1);
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
 
   &:focus {
-    background-color: rgba($ui-highlight-color, 0.15);
+    background-color: color.change($ui-highlight-color, $alpha: 0.15);
   }
 }
 
@@ -433,8 +433,8 @@
 }
 
 .inline-follow-suggestions {
-  background-color: rgba($ui-highlight-color, 0.1);
-  border-bottom-color: rgba($ui-highlight-color, 0.3);
+  background-color: color.change($ui-highlight-color, $alpha: 0.1);
+  border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
 }
 
 .inline-follow-suggestions__body__scrollable__card {
@@ -508,7 +508,7 @@ a.sparkline {
 
 @supports not selector(::-webkit-scrollbar) {
   html {
-    scrollbar-color: rgba($action-button-color, 0.25)
+    scrollbar-color: color.change($action-button-color, $alpha: 0.25)
       var(--background-border-color);
   }
 }
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index b7d9203e3f3..d66fa405819 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 
 @mixin search-input {
@@ -22,7 +23,7 @@
   padding-bottom: 14px;
   margin-top: 10px;
   color: $light-text-color;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
 
   h4 {
     text-transform: uppercase;
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 3854db0c396..da4b9bdaa81 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 @use 'functions' as *;
 
@@ -161,7 +162,7 @@
 
 .nothing-here {
   background: $ui-base-color;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
   color: $darker-text-color;
   font-size: 14px;
   font-weight: 500;
@@ -205,8 +206,8 @@
 .simple_form .overridden,
 .simple_form .recommended,
 .simple_form .not_recommended {
-  background-color: rgba($ui-secondary-color, 0.1);
-  border: 1px solid rgba($ui-secondary-color, 0.5);
+  background-color: color.change($ui-secondary-color, $alpha: 0.1);
+  border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
 }
 
 .account-role {
@@ -240,8 +241,8 @@
 .information-badge {
   &.superapp {
     color: $success-green;
-    background-color: rgba($success-green, 0.1);
-    border-color: rgba($success-green, 0.5);
+    background-color: color.change($success-green, $alpha: 0.1);
+    border-color: color.change($success-green, $alpha: 0.5);
   }
 }
 
@@ -302,8 +303,8 @@
   }
 
   .verified {
-    border: 1px solid rgba($valid-value-color, 0.5);
-    background: rgba($valid-value-color, 0.25);
+    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
+    background: color.change($valid-value-color, $alpha: 0.25);
 
     a {
       color: $valid-value-color;
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 3709a4f504c..e9b584f3966 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:math';
 @use 'functions' as *;
 @use 'variables' as *;
@@ -1255,7 +1256,7 @@ a.name-tag,
     }
 
     path:first-child {
-      fill: rgba($highlight-text-color, 0.25) !important;
+      fill: color.change($highlight-text-color, $alpha: 0.25) !important;
       fill-opacity: 1 !important;
     }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 1de7b74c501..48a7ed12cc1 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -311,7 +311,7 @@
   &:active,
   &:focus-visible {
     color: lighten($action-button-color, 7%);
-    background-color: rgba($action-button-color, 0.15);
+    background-color: color.change($action-button-color, $alpha: 0.15);
   }
 
   &:focus-visible {
@@ -331,7 +331,7 @@
     &:active,
     &:focus-visible {
       color: darken($lighter-text-color, 7%);
-      background-color: rgba($lighter-text-color, 0.15);
+      background-color: color.change($lighter-text-color, $alpha: 0.15);
     }
 
     &:focus-visible {
@@ -361,14 +361,14 @@
 
   &.overlayed {
     box-sizing: content-box;
-    background: rgba($black, 0.65);
+    background: color.change($black, $alpha: 0.65);
     backdrop-filter: $backdrop-blur-filter;
-    color: rgba($white, 0.7);
+    color: color.change($white, $alpha: 0.7);
     border-radius: 4px;
     padding: 2px;
 
     &:hover {
-      background: rgba($black, 0.9);
+      background: color.change($black, $alpha: 0.9);
     }
   }
 
@@ -391,7 +391,7 @@
     border-color: $valid-value-color;
     color: $valid-value-color;
     transition: none;
-    background-color: rgba($valid-value-color, 0.15);
+    background-color: color.change($valid-value-color, $alpha: 0.15);
   }
 }
 
@@ -411,7 +411,7 @@
   &:active,
   &:focus {
     color: darken($lighter-text-color, 7%);
-    background-color: rgba($lighter-text-color, 0.15);
+    background-color: color.change($lighter-text-color, $alpha: 0.15);
   }
 
   &:focus-visible {
@@ -618,7 +618,7 @@ body > [data-popper-placement] {
   &__warning {
     color: $inverted-text-color;
     background: $ui-primary-color;
-    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
+    box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.3);
     padding: 8px 10px;
     border-radius: 4px;
     font-size: 13px;
@@ -694,7 +694,7 @@ body > [data-popper-placement] {
 
   .spoiler-input__input {
     padding: 12px 12px - 5px;
-    background: rgba($ui-highlight-color, 0.05);
+    background: color.change($ui-highlight-color, $alpha: 0.05);
     color: $highlight-text-color;
   }
 
@@ -1428,7 +1428,7 @@ body > [data-popper-placement] {
 .focusable {
   &:focus-visible {
     outline: 0;
-    background: rgba($ui-highlight-color, 0.05);
+    background: color.change($ui-highlight-color, $alpha: 0.05);
     box-shadow: inset 0 0 0 2px $ui-button-focus-outline-color;
   }
 }
@@ -1683,10 +1683,10 @@ body > [data-popper-placement] {
 .notification-ungrouped--direct,
 .notification-group--direct,
 .notification-group--annual-report {
-  background: rgba($ui-highlight-color, 0.05);
+  background: color.change($ui-highlight-color, $alpha: 0.05);
 
   &:focus {
-    background: rgba($ui-highlight-color, 0.1);
+    background: color.change($ui-highlight-color, $alpha: 0.1);
   }
 }
 
@@ -2016,7 +2016,7 @@ body > [data-popper-placement] {
 
   &__domain-pill {
     display: inline-flex;
-    background: rgba($highlight-text-color, 0.2);
+    background: color.change($highlight-text-color, $alpha: 0.2);
     border-radius: 4px;
     border: 0;
     color: $highlight-text-color;
@@ -2077,7 +2077,7 @@ body > [data-popper-placement] {
 
       &__handle {
         border: 2px dashed $highlight-text-color;
-        background: rgba($highlight-text-color, 0.1);
+        background: color.change($highlight-text-color, $alpha: 0.1);
         padding: 12px 8px;
         color: $highlight-text-color;
         border-radius: 4px;
@@ -3283,7 +3283,7 @@ a.account__display-name {
 
 .columns-area__panels__pane--overlay {
   pointer-events: auto;
-  background: rgba($base-overlay-background, 0.5);
+  background: color.change($base-overlay-background, $alpha: 0.5);
   z-index: 3;
 
   .columns-area__panels__pane__inner {
@@ -3820,7 +3820,10 @@ a.account__display-name {
   border-radius: 10px;
   padding: 0;
   user-select: none;
-  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
+  -webkit-tap-highlight-color: color.change(
+    $base-overlay-background,
+    $alpha: 0
+  );
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -4069,7 +4072,7 @@ a.account__display-name {
     cursor: pointer;
 
     & > div {
-      background: rgba($base-shadow-color, 0.6);
+      background: color.change($base-shadow-color, $alpha: 0.6);
       border-radius: 8px;
       padding: 12px 9px;
       backdrop-filter: $backdrop-blur-filter;
@@ -4399,7 +4402,7 @@ a.status-card {
   z-index: 1;
 
   &.active {
-    box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
+    box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3);
 
     &::before {
       display: block;
@@ -4415,8 +4418,8 @@ a.status-card {
       z-index: 1;
       background: radial-gradient(
         ellipse,
-        rgba($ui-highlight-color, 0.23) 0%,
-        rgba($ui-highlight-color, 0) 60%
+        color.change($ui-highlight-color, $alpha: 0.23) 0%,
+        color.change($ui-highlight-color, $alpha: 0) 60%
       );
     }
   }
@@ -4510,7 +4513,7 @@ a.status-card {
   &.active {
     .column-header__icon {
       color: $highlight-text-color;
-      text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
+      text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4);
     }
   }
 
@@ -4855,7 +4858,7 @@ a.status-card {
     font-size: 14px;
 
     &__label {
-      background-color: rgba($black, 0.45);
+      background-color: color.change($black, $alpha: 0.45);
       backdrop-filter: $backdrop-blur-filter;
       border-radius: 8px;
       padding: 12px 16px;
@@ -4875,7 +4878,7 @@ a.status-card {
     &:hover,
     &:focus {
       .spoiler-button__overlay__label {
-        background-color: rgba($black, 0.9);
+        background-color: color.change($black, $alpha: 0.9);
       }
     }
   }
@@ -5266,7 +5269,7 @@ a.status-card {
 
 .upload-area {
   align-items: center;
-  background: rgba($base-overlay-background, 0.8);
+  background: color.change($base-overlay-background, $alpha: 0.8);
   display: flex;
   height: 100vh;
   justify-content: center;
@@ -5301,7 +5304,7 @@ a.status-card {
   z-index: -1;
   border-radius: 4px;
   background: $ui-base-color;
-  box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+  box-shadow: 0 0 5px color.change($base-shadow-color, $alpha: 0.2);
 }
 
 .upload-area__content {
@@ -5939,7 +5942,7 @@ a.status-card {
     align-items: center;
 
     .icon-button {
-      color: rgba($white, 0.7);
+      color: color.change($white, $alpha: 0.7);
       padding: 8px;
 
       .icon {
@@ -5952,11 +5955,11 @@ a.status-card {
       &:focus,
       &:active {
         color: $white;
-        background-color: rgba($white, 0.15);
+        background-color: color.change($white, $alpha: 0.15);
       }
 
       &:focus {
-        background-color: rgba($white, 0.3);
+        background-color: color.change($white, $alpha: 0.3);
       }
     }
   }
@@ -5997,7 +6000,7 @@ a.status-card {
   background: transparent;
   box-sizing: border-box;
   border: 0;
-  color: rgba($white, 0.7);
+  color: color.change($white, $alpha: 0.7);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -6051,11 +6054,11 @@ a.status-card {
       &:focus,
       &:active {
         color: $white;
-        background-color: rgba($white, 0.15);
+        background-color: color.change($white, $alpha: 0.15);
       }
 
       &:focus {
-        background-color: rgba($white, 0.3);
+        background-color: color.change($white, $alpha: 0.3);
       }
 
       &.active {
@@ -6064,11 +6067,11 @@ a.status-card {
         &:hover,
         &:focus,
         &:active {
-          background: rgba($highlight-text-color, 0.15);
+          background: color.change($highlight-text-color, $alpha: 0.15);
         }
 
         &:focus {
-          background: rgba($highlight-text-color, 0.3);
+          background: color.change($highlight-text-color, $alpha: 0.3);
         }
       }
 
@@ -6078,11 +6081,11 @@ a.status-card {
         &:hover,
         &:focus,
         &:active {
-          background: rgba($gold-star, 0.15);
+          background: color.change($gold-star, $alpha: 0.15);
         }
 
         &:focus {
-          background: rgba($gold-star, 0.3);
+          background: color.change($gold-star, $alpha: 0.3);
         }
       }
 
@@ -6954,7 +6957,7 @@ a.status-card {
     display: block;
     color: $white;
     border: 0;
-    background: rgba($black, 0.65);
+    background: color.change($black, $alpha: 0.65);
     backdrop-filter: $backdrop-blur-filter;
     padding: 3px 12px;
     border-radius: 99px;
@@ -6979,7 +6982,7 @@ a.status-card {
   text-align: center;
   color: $white;
   border: 0;
-  background: rgba($black, 0.65);
+  background: color.change($black, $alpha: 0.65);
   backdrop-filter: $backdrop-blur-filter;
   padding: 3px 8px;
   border-radius: 4px;
@@ -7001,7 +7004,7 @@ a.status-card {
 }
 
 .media-gallery__alt__popover {
-  background: rgba($black, 0.65);
+  background: color.change($black, $alpha: 0.65);
   backdrop-filter: $backdrop-blur-filter;
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
@@ -7023,7 +7026,7 @@ a.status-card {
   p {
     font-size: 15px;
     line-height: 20px;
-    color: rgba($white, 0.85);
+    color: color.change($white, $alpha: 0.85);
     white-space: pre-line;
   }
 }
@@ -7467,8 +7470,8 @@ a.status-card {
     box-sizing: border-box;
     background: linear-gradient(
       0deg,
-      rgba($base-shadow-color, 0.85) 0,
-      rgba($base-shadow-color, 0.45) 60%,
+      color.change($base-shadow-color, $alpha: 0.85) 0,
+      color.change($base-shadow-color, $alpha: 0.45) 60%,
       transparent
     );
     padding: 0 15px;
@@ -7564,7 +7567,7 @@ a.status-card {
       flex: 0 0 auto;
       background: transparent;
       border: 0;
-      color: rgba($white, 0.75);
+      color: color.change($white, $alpha: 0.75);
       font-weight: 500;
 
       &:active,
@@ -7628,7 +7631,7 @@ a.status-card {
     &::before {
       content: '';
       width: 50px;
-      background: rgba($white, 0.35);
+      background: color.change($white, $alpha: 0.35);
       border-radius: 4px;
       display: block;
       position: absolute;
@@ -7660,7 +7663,7 @@ a.status-card {
       margin-inline-start: -6px;
       transform: translate(0, -50%);
       background: $white;
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
       opacity: 0;
 
       .no-reduce-motion & {
@@ -7698,7 +7701,7 @@ a.status-card {
     &::before {
       content: '';
       width: 100%;
-      background: rgba($white, 0.35);
+      background: color.change($white, $alpha: 0.35);
       border-radius: 4px;
       display: block;
       position: absolute;
@@ -7717,7 +7720,7 @@ a.status-card {
     }
 
     &__buffer {
-      background: rgba($white, 0.2);
+      background: color.change($white, $alpha: 0.2);
     }
 
     &__handle {
@@ -7730,7 +7733,7 @@ a.status-card {
       top: 10px;
       margin-inline-start: -6px;
       background: $white;
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      box-shadow: 1px 2px 6px color.change($base-shadow-color, $alpha: 0.2);
 
       .no-reduce-motion & {
         transition: opacity 0.1s ease;
@@ -7754,7 +7757,7 @@ a.status-card {
     top: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
-    background: rgba($base-shadow-color, 0.45);
+    background: color.change($base-shadow-color, $alpha: 0.45);
     backdrop-filter: $backdrop-blur-filter;
     color: $white;
     border-radius: 8px;
@@ -8089,7 +8092,7 @@ noscript {
   inset-inline-start: 0;
   width: 100%;
   height: 100%;
-  background: rgba($base-overlay-background, 0.5);
+  background: color.change($base-overlay-background, $alpha: 0.5);
 }
 
 .focal-point {
@@ -8111,7 +8114,7 @@ noscript {
     transform: translate(-50%, -50%);
     border: 2px solid #fff;
     border-radius: 50%;
-    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
+    box-shadow: 0 0 0 9999em color.change($base-shadow-color, $alpha: 0.35);
     pointer-events: none;
   }
 }
@@ -8353,7 +8356,7 @@ noscript {
       }
 
       .verified {
-        border: 1px solid rgba($valid-value-color, 0.5);
+        border: 1px solid color.change($valid-value-color, $alpha: 0.5);
         margin-top: -1px;
         margin-inline: -1px;
 
@@ -8573,7 +8576,7 @@ noscript {
       width: 50px;
 
       path:first-child {
-        fill: rgba($highlight-text-color, 0.25) !important;
+        fill: color.change($highlight-text-color, $alpha: 0.25) !important;
         fill-opacity: 1 !important;
       }
 
@@ -8598,7 +8601,7 @@ noscript {
 
       .trends__item__sparkline {
         path:first-child {
-          fill: rgba($gold-star, 0.25) !important;
+          fill: color.change($gold-star, $alpha: 0.25) !important;
         }
 
         path:last-child {
@@ -9763,7 +9766,7 @@ noscript {
   margin-bottom: 5px;
   border-radius: 8px;
   border: 1px solid $highlight-text-color;
-  background: rgba($highlight-text-color, 0.15);
+  background: color.change($highlight-text-color, $alpha: 0.15);
   overflow: hidden;
   flex-shrink: 0;
 
@@ -9818,7 +9821,7 @@ noscript {
     }
 
     .button-tertiary {
-      background: rgba($ui-base-color, 0.15);
+      background: color.change($ui-base-color, $alpha: 0.15);
       backdrop-filter: blur(8px);
     }
   }
@@ -9835,7 +9838,7 @@ noscript {
 
 .warning-banner {
   border: 1px solid $warning-red;
-  background: rgba($warning-red, 0.15);
+  background: color.change($warning-red, $alpha: 0.15);
 
   &__message {
     h1 {
@@ -10170,13 +10173,13 @@ noscript {
   padding: 15px;
   margin: 0;
   color: $white;
-  background: rgba($black, 0.85);
+  background: color.change($black, $alpha: 0.85);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
   border-radius: 8px;
   box-shadow:
-    0 10px 15px -3px rgba($base-shadow-color, 0.25),
-    0 4px 6px -4px rgba($base-shadow-color, 0.25);
+    0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
+    0 4px 6px -4px color.change($base-shadow-color, $alpha: 0.25);
   cursor: default;
   font-size: 15px;
   line-height: 21px;
@@ -10214,7 +10217,7 @@ noscript {
   &:hover,
   &:focus,
   &:active {
-    background: rgba($ui-base-color, 0.85);
+    background: color.change($ui-base-color, $alpha: 0.85);
   }
 }
 
@@ -10312,7 +10315,7 @@ noscript {
   padding: 16px 0;
   padding-bottom: 0;
   border-bottom: 1px solid var(--background-border-color);
-  background: rgba($ui-highlight-color, 0.05);
+  background: color.change($ui-highlight-color, $alpha: 0.05);
 
   &__header {
     display: flex;
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
index 7f27c12f774..78915ae10ee 100644
--- a/app/javascript/styles/mastodon/css_variables.scss
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -6,10 +6,10 @@
   --dropdown-border-color: #{lighten($ui-base-color, 4%)};
   --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --dropdown-shadow:
-    0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
-    0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
+    0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
+    0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
   --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
-  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
+  --modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
   --background-border-color: #{lighten($ui-base-color, 4%)};
   --background-color: #{darken($ui-base-color, 8%)};
@@ -21,7 +21,9 @@
   --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
   --avatar-border-radius: 8px;
   --media-outline-color: #{rgba(#fcf8ff, 0.15)};
-  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.35)});
+  --overlay-icon-shadow: drop-shadow(
+    0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
+  );
   --error-background-color: #{darken($error-red, 16%)};
   --error-active-background-color: #{darken($error-red, 12%)};
   --on-error-color: #fff;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 4762168bd89..b3708b722e3 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 @use 'functions' as *;
 
@@ -733,20 +734,20 @@ code {
   text-align: center;
 
   &.notice {
-    border: 1px solid rgba($valid-value-color, 0.5);
-    background: rgba($valid-value-color, 0.25);
+    border: 1px solid color.change($valid-value-color, $alpha: 0.5);
+    background: color.change($valid-value-color, $alpha: 0.25);
     color: $valid-value-color;
   }
 
   &.warning {
-    border: 1px solid rgba($gold-star, 0.5);
-    background: rgba($gold-star, 0.25);
+    border: 1px solid color.change($gold-star, $alpha: 0.5);
+    background: color.change($gold-star, $alpha: 0.25);
     color: $gold-star;
   }
 
   &.alert {
-    border: 1px solid rgba($error-value-color, 0.5);
-    background: rgba($error-value-color, 0.1);
+    border: 1px solid color.change($error-value-color, $alpha: 0.5);
+    background: color.change($error-value-color, $alpha: 0.1);
     color: $error-value-color;
   }
 
@@ -965,7 +966,7 @@ code {
   background: $simple-background-color;
   padding: 4px;
   margin: 0 10px 20px 0;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
   display: inline-block;
 
   svg {
@@ -988,10 +989,10 @@ code {
 .simple_form {
   .warning {
     box-sizing: border-box;
-    background: rgba($error-value-color, 0.5);
+    background: color.change($error-value-color, $alpha: 0.5);
     color: $primary-text-color;
-    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
-    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
+    text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
+    box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
     border-radius: 4px;
     padding: 10px;
     margin-bottom: 15px;
@@ -1350,7 +1351,7 @@ code {
       width: 100%;
       height: 100%;
       position: absolute;
-      background: rgba($error-value-color, 0.25);
+      background: color.change($error-value-color, $alpha: 0.25);
       z-index: 2;
       border-radius: 8px;
     }
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index f49ce3c413b..4402e51b9ba 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 @use 'functions' as *;
 
@@ -206,7 +207,7 @@
 
     &:active,
     &:focus {
-      background-color: rgba($dark-text-color, 0.1);
+      background-color: color.change($dark-text-color, $alpha: 0.1);
     }
   }
 
@@ -225,7 +226,7 @@
     background: rgba(darken($ui-primary-color, 14%), 0.7);
 
     &.leading {
-      background: rgba($ui-highlight-color, 0.5);
+      background: color.change($ui-highlight-color, $alpha: 0.5);
     }
   }
 }
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 8d09c7d5839..266a9ca9307 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'variables' as *;
 @use 'functions' as *;
 
@@ -16,7 +17,7 @@
       padding: 15px;
       text-decoration: none;
       color: inherit;
-      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+      box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
     }
 
     & > a {