diff --git a/app/javascript/flavours/glitch/styles/_functions.scss b/app/javascript/flavours/glitch/styles/_functions.scss
new file mode 100644
index 0000000000..7190a6233e
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/_functions.scss
@@ -0,0 +1,21 @@
+@use 'sass:color';
+
+$darken-multiplier: -1 !default;
+$lighten-multiplier: 1 !default;
+
+// Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $darken-multiplier,
+    $space: hsl
+  );
+}
+
+@function lighten($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $lighten-multiplier,
+    $space: hsl
+  );
+}
diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index d4f29b0d1f..4ce5b5d2ca 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 @mixin fullwidth-gallery {
   &.full-width {
     margin-left: -14px;
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/_variables.scss
similarity index 70%
rename from app/javascript/flavours/glitch/styles/variables.scss
rename to app/javascript/flavours/glitch/styles/_variables.scss
index db4ef7e089..17f5800b50 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/_variables.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'functions' as *;
 
 // Commonly used web colors
 $black: #000000; // Black
@@ -96,6 +97,7 @@ $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 1175px;
 $mobile-breakpoint: 630px;
+$no-columns-breakpoint: 600px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
@@ -107,32 +109,7 @@ $ui-avatar-border-size: 8%;
 // More variables
 $dismiss-overlay-width: 4rem;
 
-:root {
-  --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)};
-  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
-  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
-  --modal-border-color: #{lighten($ui-base-color, 4%)};
-  --background-border-color: #{lighten($ui-base-color, 4%)};
-  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  --background-color: #{darken($ui-base-color, 8%)};
-  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --surface-background-color: #{darken($ui-base-color, 4%)};
-  --surface-variant-background-color: #{$ui-base-color};
-  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
-  --on-surface-color: #{transparentize($ui-base-color, 0.5)};
-  --avatar-border-radius: 8px;
-  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
-  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
-  --error-background-color: #{darken($error-red, 16%)};
-  --error-active-background-color: #{darken($error-red, 12%)};
-  --on-error-color: #fff;
-  --rich-text-container-color: rgba(87, 24, 60, 100%);
-  --rich-text-text-color: rgba(255, 175, 212, 100%);
-  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
-  --input-placeholder-color: #{$dark-text-color};
-  --input-background-color: var(--surface-variant-background-color);
-  --on-input-color: #{$secondary-text-color};
-}
+$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'
+  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 4d53195606..9a13034a3a 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
 
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
index 1f16fc26c0..a80019925f 100644
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ b/app/javascript/flavours/glitch/styles/accessibility.scss
@@ -1,7 +1,4 @@
-$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'
-  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
+@use 'variables' as *;
 
 %emoji-color-inversion {
   filter: invert(1);
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index c4e0300776..4849a9cd69 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .card {
   & > a {
     display: block;
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index ff3e5d8e33..1829012a65 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'functions' as *;
+@use 'variables' as *;
 
 $no-columns-breakpoint: 890px;
 $sidebar-width: 300px;
diff --git a/app/javascript/flavours/glitch/styles/annual_reports.scss b/app/javascript/flavours/glitch/styles/annual_reports.scss
index dff1c76eca..96500a18bb 100644
--- a/app/javascript/flavours/glitch/styles/annual_reports.scss
+++ b/app/javascript/flavours/glitch/styles/annual_reports.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 :root {
   --indigo-1: #17063b;
   --indigo-2: #2f0c7a;
diff --git a/app/javascript/flavours/glitch/styles/application.scss b/app/javascript/flavours/glitch/styles/application.scss
index ac58cca66a..9b62f657ee 100644
--- a/app/javascript/flavours/glitch/styles/application.scss
+++ b/app/javascript/flavours/glitch/styles/application.scss
@@ -1,27 +1,29 @@
-@import 'mixins';
-@import 'variables';
-@import 'styles/fonts/roboto';
-@import 'styles/fonts/roboto-mono';
+@use 'functions';
+@use 'mixins';
+@use 'variables';
+@use 'css_variables';
+@use 'styles/fonts/roboto';
+@use 'styles/fonts/roboto-mono';
 
-@import 'reset';
-@import 'basics';
-@import 'branding';
-@import 'containers';
-@import 'lists';
-@import 'widgets';
-@import 'forms';
-@import 'accounts';
-@import 'components';
-@import 'polls';
-@import 'modal';
-@import 'emoji_picker';
-@import 'annual_reports';
-@import 'about';
-@import 'tables';
-@import 'admin';
-@import 'dashboard';
-@import 'rtl';
-@import 'accessibility';
-@import 'rich_text';
-@import 'glitch_local_settings';
-@import 'glitch_doodle';
+@use 'reset';
+@use 'basics';
+@use 'branding';
+@use 'containers';
+@use 'lists';
+@use 'widgets';
+@use 'forms';
+@use 'accounts';
+@use 'components';
+@use 'polls';
+@use 'modal';
+@use 'emoji_picker';
+@use 'annual_reports';
+@use 'about';
+@use 'tables';
+@use 'admin';
+@use 'dashboard';
+@use 'rtl';
+@use 'accessibility';
+@use 'rich_text';
+@use 'glitch_local_settings';
+@use 'glitch_doodle';
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 539c30c0f8..8e7f7e41c6 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 @function hex-color($color) {
   @if type-of($color) == 'color' {
     $color: str-slice(ie-hex-str($color), 4);
diff --git a/app/javascript/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.scss
index d1bddc68b0..8e8dd3530b 100644
--- a/app/javascript/flavours/glitch/styles/branding.scss
+++ b/app/javascript/flavours/glitch/styles/branding.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .logo {
   color: $primary-text-color;
 }
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 86ded78312..04cb7d9749 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1,3 +1,8 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'functions' as *;
+@use 'mixins' as *;
+
 .app-body {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -1899,18 +1904,22 @@ body > [data-popper-placement] {
 .detailed-status__wrapper-direct {
   .detailed-status,
   .detailed-status__action-bar {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    background: color.mix($ui-base-color, $ui-highlight-color, 95%);
   }
 
   &:focus {
     .detailed-status,
     .detailed-status__action-bar {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+      background: color.mix(
+        lighten($ui-base-color, 4%),
+        $ui-highlight-color,
+        95%
+      );
     }
   }
 
   .detailed-status__action-bar {
-    border-top-color: mix(
+    border-top-color: color.mix(
       lighten($ui-base-color, 8%),
       $ui-highlight-color,
       95%
@@ -8818,7 +8827,7 @@ noscript {
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(
+      background-color: color.mix(
         lighten($ui-base-color, 12%),
         $ui-highlight-color,
         80%
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index ac1f862a09..7db9ca409d 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .container-alt {
   width: 700px;
   margin: 0 auto;
diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.scss
index 5b43aecbe7..367be051f1 100644
--- a/app/javascript/flavours/glitch/styles/contrast.scss
+++ b/app/javascript/flavours/glitch/styles/contrast.scss
@@ -1,3 +1,3 @@
-@import 'contrast/variables';
-@import 'application';
-@import 'contrast/diff';
+@use 'contrast/variables';
+@use 'application';
+@use 'contrast/diff';
diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss
index ae607f484a..47b9b63d6f 100644
--- a/app/javascript/flavours/glitch/styles/contrast/diff.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .status__content a,
 .reply-indicator__content a,
 .edit-indicator__content a,
diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss
index 766591ba40..fd7928fc68 100644
--- a/app/javascript/flavours/glitch/styles/contrast/variables.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss
@@ -1,3 +1,5 @@
+@use '../functions' as *;
+
 // Dependent colors
 $black: #000000;
 
@@ -11,12 +13,13 @@ $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%);
-
-$inverted-text-color: $black !default;
-$lighter-text-color: darken($ui-base-color, 6%) !default;
-$light-text-color: darken($ui-primary-color, 40%) !default;
+@use '../variables' with (
+  $darker-text-color: lighten($ui-primary-color, 20%),
+  $dark-text-color: lighten($ui-primary-color, 12%),
+  $secondary-text-color: lighten($ui-secondary-color, 6%),
+  $highlight-text-color: lighten($ui-highlight-color, 10%),
+  $action-button-color: lighten($ui-base-color, 50%),
+  $inverted-text-color: $black,
+  $lighter-text-color: darken($ui-base-color, 6%),
+  $light-text-color: darken($ui-primary-color, 40%)
+);
diff --git a/app/javascript/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss
new file mode 100644
index 0000000000..48de520417
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/css_variables.scss
@@ -0,0 +1,33 @@
+@use 'sass:color';
+@use 'functions' as *;
+@use 'variables' as *;
+
+:root {
+  --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)};
+  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
+  --background-border-color: #{lighten($ui-base-color, 4%)};
+  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  --background-color: #{darken($ui-base-color, 8%)};
+  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
+  --surface-background-color: #{darken($ui-base-color, 4%)};
+  --surface-variant-background-color: #{$ui-base-color};
+  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
+  --avatar-border-radius: 8px;
+  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
+  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
+  --error-background-color: #{darken($error-red, 16%)};
+  --error-active-background-color: #{darken($error-red, 12%)};
+  --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
+  --input-placeholder-color: #{$dark-text-color};
+  --input-background-color: var(--surface-variant-background-color);
+  --on-input-color: #{$secondary-text-color};
+}
diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
index d049b2456c..c99cdc357a 100644
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ b/app/javascript/flavours/glitch/styles/dashboard.scss
@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;
diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss
index 3189000588..1fde5de1dc 100644
--- a/app/javascript/flavours/glitch/styles/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/emoji_picker.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 62a98e7f26..54368ff942 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -1,4 +1,5 @@
-$no-columns-breakpoint: 600px;
+@use 'variables' as *;
+@use 'functions' as *;
 
 code {
   font-family: $font-monospace, monospace;
diff --git a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss b/app/javascript/flavours/glitch/styles/glitch_local_settings.scss
index f416de1f3d..59f02cb67c 100644
--- a/app/javascript/flavours/glitch/styles/glitch_local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/glitch_local_settings.scss
@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 .glitch.local-settings {
   position: relative;
   display: flex;
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.scss
index 756a12d868..b530616a3c 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light.scss
@@ -1,3 +1,4 @@
-@import 'mastodon-light/variables';
-@import 'application';
-@import 'mastodon-light/diff';
+@use 'mastodon-light/variables';
+@use 'mastodon-light/css_variables';
+@use 'application';
+@use 'mastodon-light/diff';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss
new file mode 100644
index 0000000000..d48edb1a34
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/css_variables.scss
@@ -0,0 +1,21 @@
+@use 'sass:color';
+@use '../variables' as *;
+@use 'variables' as *;
+@use '../functions' as *;
+
+body {
+  --dropdown-border-color: hsl(240deg, 25%, 88%);
+  --dropdown-background-color: #fff;
+  --modal-border-color: hsl(240deg, 25%, 88%);
+  --modal-background-color: var(--background-color-tint);
+  --background-border-color: hsl(240deg, 25%, 88%);
+  --background-color: #fff;
+  --background-color-tint: rgba(255, 255, 255, 80%);
+  --background-filter: blur(10px);
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
+  --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
+  --input-background-color: #{darken($ui-base-color, 10%)};
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 5d12769209..7cc1f40332 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -1,5 +1,8 @@
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.
+@use 'sass:color';
+@use '../functions' as *;
+@use '../variables' as *;
 
 .simple_form .button.button-tertiary {
   color: $highlight-text-color;
@@ -152,8 +155,12 @@
 }
 
 .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(
+    lighten($ui-base-color, 8%),
+    $ui-highlight-color,
+    80%
+  );
 }
 
 .media-modal__overlay .picture-in-picture__footer {
@@ -242,7 +249,7 @@
 
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
-  background: $account-background-color;
+  background: $white;
   border-bottom-color: lighten($ui-base-color, 8%);
 }
 
@@ -284,7 +291,7 @@
   }
 
   .entry {
-    background: $account-background-color;
+    background: $white;
 
     .detailed-status.light,
     .more.light,
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
index 23d846ae80..84431e48b5 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
@@ -1,84 +1,46 @@
 @use 'sass:color';
 
-// Dependent colors
-$black: #000000;
-$white: #ffffff;
+@use '../functions' with (
+  $darken-multiplier: 1,
+  $lighten-multiplier: -1
+);
 
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
-
-$blurple-600: hsl(252deg, 59%, 51%); // Iris
-$blurple-500: hsl(240deg, 100%, 69%); // Brand purple
-$blurple-300: hsl(237deg, 92%, 75%); // Faded Blue
+$black: #000000; // Black
+$white: #ffffff; // White
+$blurple-500: #6364ff; // Brand purple
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-// Differences
-$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
+$classic-base-color: hsl(240deg, 16%, 19%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: $blurple-500;
 
-$base-overlay-background: $white !default;
-$valid-value-color: $success-green !default;
+@use '../variables' with (
+  $success-green: color.adjust(
+      hsl(138deg, 32%, 35%),
+      $lightness: 8%,
+      $space: hsl
+    ),
+  $base-overlay-background: $white,
 
-$ui-base-color: $classic-secondary-color !default;
-$ui-base-lighter-color: hsl(250deg, 24%, 75%);
-$ui-primary-color: $classic-primary-color !default;
-$ui-secondary-color: $classic-base-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
+  $ui-base-color: $classic-secondary-color,
+  $ui-base-lighter-color: hsl(250deg, 24%, 75%),
+  $ui-secondary-color: $classic-base-color,
 
-$ui-button-secondary-color: $grey-600 !default;
-$ui-button-secondary-border-color: $grey-600 !default;
-$ui-button-secondary-focus-color: $white !default;
+  $ui-button-secondary-color: $grey-600,
+  $ui-button-secondary-border-color: $grey-600,
+  $ui-button-secondary-focus-color: $white,
+  $ui-button-tertiary-color: $blurple-500,
+  $ui-button-tertiary-border-color: $blurple-500,
 
-$ui-button-tertiary-color: $blurple-500 !default;
-$ui-button-tertiary-border-color: $blurple-500 !default;
+  $primary-text-color: $black,
+  $darker-text-color: $classic-base-color,
+  $lighter-text-color: $classic-base-color,
+  $highlight-text-color: $classic-highlight-color,
+  $dark-text-color: hsl(240deg, 16%, 32%),
+  $light-text-color: hsl(240deg, 16%, 32%),
+  $inverted-text-color: $black,
 
-$primary-text-color: $black !default;
-$darker-text-color: $classic-base-color !default;
-$highlight-text-color: $ui-highlight-color !default;
-$dark-text-color: hsl(240deg, 16%, 32%);
-$action-button-color: hsl(240deg, 16%, 45%);
-
-$inverted-text-color: $black !default;
-$lighter-text-color: $classic-base-color !default;
-$light-text-color: hsl(240deg, 16%, 32%);
-
-// Newly added colors
-$account-background-color: $white !default;
-
-// Invert darkened and lightened colors
-@function darken($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) + $amount
-  );
-}
-
-@function lighten($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) - $amount
-  );
-}
-
-$emojis-requiring-inversion: 'chains';
-
-body {
-  --dropdown-border-color: hsl(240deg, 25%, 88%);
-  --dropdown-background-color: #fff;
-  --modal-border-color: hsl(240deg, 25%, 88%);
-  --modal-background-color: var(--background-color-tint);
-  --background-border-color: hsl(240deg, 25%, 88%);
-  --background-color: #fff;
-  --background-color-tint: rgba(255, 255, 255, 80%);
-  --background-filter: blur(10px);
-  --on-surface-color: #{transparentize($ui-base-color, 0.65)};
-  --rich-text-container-color: rgba(255, 216, 231, 100%);
-  --rich-text-text-color: rgba(114, 47, 83, 100%);
-  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
-  --input-placeholder-color: #{transparentize($dark-text-color, 0.5)};
-  --input-background-color: #{darken($ui-base-color, 10%)};
-}
+  $action-button-color: hsl(240deg, 16%, 45%),
+  $emojis-requiring-inversion: 'chains'
+);
diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss
index 60e7d62245..7d060a2681 100644
--- a/app/javascript/flavours/glitch/styles/modal.scss
+++ b/app/javascript/flavours/glitch/styles/modal.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .modal-layout {
   background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index f2b39194e4..5ead51e6c2 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .poll {
   margin-top: 16px;
   font-size: 14px;
diff --git a/app/javascript/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.scss
index d1ca4a1837..2dce637a06 100644
--- a/app/javascript/flavours/glitch/styles/reset.scss
+++ b/app/javascript/flavours/glitch/styles/reset.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index ba60983436..8ac564ae47 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 body.rtl {
   direction: rtl;
 
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
index e2996356bf..cf06110213 100644
--- a/app/javascript/flavours/glitch/styles/tables.scss
+++ b/app/javascript/flavours/glitch/styles/tables.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .table {
   width: 100%;
   max-width: 100%;
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index f467069052..8d09c7d583 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .directory {
   &__tag {
     box-sizing: border-box;
diff --git a/app/javascript/skins/glitch/contrast/common.scss b/app/javascript/skins/glitch/contrast/common.scss
index 90919d6d48..4385452e25 100644
--- a/app/javascript/skins/glitch/contrast/common.scss
+++ b/app/javascript/skins/glitch/contrast/common.scss
@@ -1 +1 @@
-@import 'flavours/glitch/styles/contrast';
+@use 'flavours/glitch/styles/contrast';
diff --git a/app/javascript/skins/glitch/default/common.scss b/app/javascript/skins/glitch/default/common.scss
index ff0d0831e0..3251b51233 100644
--- a/app/javascript/skins/glitch/default/common.scss
+++ b/app/javascript/skins/glitch/default/common.scss
@@ -1 +1 @@
-@import 'flavours/glitch/styles/application';
+@use 'flavours/glitch/styles/application';
diff --git a/app/javascript/skins/glitch/mastodon-light/common.scss b/app/javascript/skins/glitch/mastodon-light/common.scss
index c37f407b3e..e0db4f526a 100644
--- a/app/javascript/skins/glitch/mastodon-light/common.scss
+++ b/app/javascript/skins/glitch/mastodon-light/common.scss
@@ -1 +1 @@
-@import 'flavours/glitch/styles/mastodon-light';
+@use 'flavours/glitch/styles/mastodon-light';
diff --git a/app/javascript/skins/vanilla/contrast/common.scss b/app/javascript/skins/vanilla/contrast/common.scss
index 5f752b6d4b..16257b7b9d 100644
--- a/app/javascript/skins/vanilla/contrast/common.scss
+++ b/app/javascript/skins/vanilla/contrast/common.scss
@@ -1 +1 @@
-@import 'styles/contrast';
+@use 'styles/contrast';
diff --git a/app/javascript/skins/vanilla/default/common.scss b/app/javascript/skins/vanilla/default/common.scss
index 71ac01180a..3e863e6552 100644
--- a/app/javascript/skins/vanilla/default/common.scss
+++ b/app/javascript/skins/vanilla/default/common.scss
@@ -1 +1 @@
-@import 'styles/application';
+@use 'styles/application';
diff --git a/app/javascript/skins/vanilla/mastodon-light/common.scss b/app/javascript/skins/vanilla/mastodon-light/common.scss
index e1a3ea2c6e..d48637ef78 100644
--- a/app/javascript/skins/vanilla/mastodon-light/common.scss
+++ b/app/javascript/skins/vanilla/mastodon-light/common.scss
@@ -1 +1 @@
-@import 'styles/mastodon-light';
+@use 'styles/mastodon-light';
diff --git a/app/javascript/skins/vanilla/win95/common.scss b/app/javascript/skins/vanilla/win95/common.scss
index 298f6ee9d5..27382f52fd 100644
--- a/app/javascript/skins/vanilla/win95/common.scss
+++ b/app/javascript/skins/vanilla/win95/common.scss
@@ -1 +1 @@
-@import 'styles/win95';
+@use 'styles/win95';
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 109b69bca5..b328d8ee34 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -1,25 +1,27 @@
-@import 'mastodon/mixins';
-@import 'mastodon/variables';
-@import 'fonts/roboto';
-@import 'fonts/roboto-mono';
+@use 'mastodon/functions';
+@use 'mastodon/mixins';
+@use 'mastodon/variables';
+@use 'mastodon/css_variables';
+@use 'fonts/roboto';
+@use 'fonts/roboto-mono';
 
-@import 'mastodon/reset';
-@import 'mastodon/basics';
-@import 'mastodon/branding';
-@import 'mastodon/containers';
-@import 'mastodon/lists';
-@import 'mastodon/widgets';
-@import 'mastodon/forms';
-@import 'mastodon/accounts';
-@import 'mastodon/components';
-@import 'mastodon/polls';
-@import 'mastodon/modal';
-@import 'mastodon/emoji_picker';
-@import 'mastodon/annual_reports';
-@import 'mastodon/about';
-@import 'mastodon/tables';
-@import 'mastodon/admin';
-@import 'mastodon/dashboard';
-@import 'mastodon/rtl';
-@import 'mastodon/accessibility';
-@import 'mastodon/rich_text';
+@use 'mastodon/reset';
+@use 'mastodon/basics';
+@use 'mastodon/branding';
+@use 'mastodon/containers';
+@use 'mastodon/lists';
+@use 'mastodon/widgets';
+@use 'mastodon/forms';
+@use 'mastodon/accounts';
+@use 'mastodon/components';
+@use 'mastodon/polls';
+@use 'mastodon/modal';
+@use 'mastodon/emoji_picker';
+@use 'mastodon/annual_reports';
+@use 'mastodon/about';
+@use 'mastodon/tables';
+@use 'mastodon/admin';
+@use 'mastodon/dashboard';
+@use 'mastodon/rtl';
+@use 'mastodon/accessibility';
+@use 'mastodon/rich_text';
diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss
index 5b43aecbe7..367be051f1 100644
--- a/app/javascript/styles/contrast.scss
+++ b/app/javascript/styles/contrast.scss
@@ -1,3 +1,3 @@
-@import 'contrast/variables';
-@import 'application';
-@import 'contrast/diff';
+@use 'contrast/variables';
+@use 'application';
+@use 'contrast/diff';
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index ae607f484a..8aa05dd8ef 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -1,3 +1,5 @@
+@use '../mastodon/variables' as *;
+
 .status__content a,
 .reply-indicator__content a,
 .edit-indicator__content a,
diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 766591ba40..b3feee1ca4 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -1,3 +1,5 @@
+@use '../mastodon/functions' as *;
+
 // Dependent colors
 $black: #000000;
 
@@ -11,12 +13,13 @@ $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%);
-
-$inverted-text-color: $black !default;
-$lighter-text-color: darken($ui-base-color, 6%) !default;
-$light-text-color: darken($ui-primary-color, 40%) !default;
+@use '../mastodon/variables' with (
+  $darker-text-color: lighten($ui-primary-color, 20%),
+  $dark-text-color: lighten($ui-primary-color, 12%),
+  $secondary-text-color: lighten($ui-secondary-color, 6%),
+  $highlight-text-color: lighten($ui-highlight-color, 10%),
+  $action-button-color: lighten($ui-base-color, 50%),
+  $inverted-text-color: $black,
+  $lighter-text-color: darken($ui-base-color, 6%),
+  $light-text-color: darken($ui-primary-color, 40%)
+);
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index 1f3310877a..1e339b4313 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -1,4 +1,4 @@
-@import 'fonts/inter';
+@use 'fonts/inter';
 
 body {
   accent-color: #6364ff;
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
index 756a12d868..b530616a3c 100644
--- a/app/javascript/styles/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-light.scss
@@ -1,3 +1,4 @@
-@import 'mastodon-light/variables';
-@import 'application';
-@import 'mastodon-light/diff';
+@use 'mastodon-light/variables';
+@use 'mastodon-light/css_variables';
+@use 'application';
+@use 'mastodon-light/diff';
diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss
new file mode 100644
index 0000000000..d9311da1b9
--- /dev/null
+++ b/app/javascript/styles/mastodon-light/css_variables.scss
@@ -0,0 +1,21 @@
+@use 'sass:color';
+@use '../mastodon/variables' as *;
+@use 'variables' as *;
+@use '../mastodon/functions' as *;
+
+body {
+  --dropdown-border-color: hsl(240deg, 25%, 88%);
+  --dropdown-background-color: #fff;
+  --modal-border-color: hsl(240deg, 25%, 88%);
+  --modal-background-color: var(--background-color-tint);
+  --background-border-color: hsl(240deg, 25%, 88%);
+  --background-color: #fff;
+  --background-color-tint: rgba(255, 255, 255, 80%);
+  --background-filter: blur(10px);
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
+  --input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
+  --input-background-color: #{darken($ui-base-color, 10%)};
+}
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index d23d789e46..8ca860a86d 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -1,5 +1,8 @@
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.
+@use 'sass:color';
+@use '../mastodon/functions' as *;
+@use '../mastodon/variables' as *;
 
 .simple_form .button.button-tertiary {
   color: $highlight-text-color;
@@ -152,8 +155,12 @@
 }
 
 .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(
+    lighten($ui-base-color, 8%),
+    $ui-highlight-color,
+    80%
+  );
 }
 
 .media-modal__overlay .picture-in-picture__footer {
@@ -242,7 +249,7 @@
 
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
-  background: $account-background-color;
+  background: $white;
   border-bottom-color: lighten($ui-base-color, 8%);
 }
 
@@ -284,7 +291,7 @@
   }
 
   .entry {
-    background: $account-background-color;
+    background: $white;
 
     .detailed-status.light,
     .more.light,
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 23d846ae80..68596e4470 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -1,84 +1,46 @@
 @use 'sass:color';
 
-// Dependent colors
-$black: #000000;
-$white: #ffffff;
+@use '../mastodon/functions' with (
+  $darken-multiplier: 1,
+  $lighten-multiplier: -1
+);
 
-$classic-base-color: hsl(240deg, 16%, 19%);
-$classic-primary-color: hsl(240deg, 29%, 70%);
-$classic-secondary-color: hsl(255deg, 25%, 88%);
-$classic-highlight-color: hsl(240deg, 100%, 69%);
-
-$blurple-600: hsl(252deg, 59%, 51%); // Iris
-$blurple-500: hsl(240deg, 100%, 69%); // Brand purple
-$blurple-300: hsl(237deg, 92%, 75%); // Faded Blue
+$black: #000000; // Black
+$white: #ffffff; // White
+$blurple-500: #6364ff; // Brand purple
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-// Differences
-$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
+$classic-base-color: hsl(240deg, 16%, 19%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: $blurple-500;
 
-$base-overlay-background: $white !default;
-$valid-value-color: $success-green !default;
+@use '../mastodon/variables' with (
+  $success-green: color.adjust(
+      hsl(138deg, 32%, 35%),
+      $lightness: 8%,
+      $space: hsl
+    ),
+  $base-overlay-background: $white,
 
-$ui-base-color: $classic-secondary-color !default;
-$ui-base-lighter-color: hsl(250deg, 24%, 75%);
-$ui-primary-color: $classic-primary-color !default;
-$ui-secondary-color: $classic-base-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
+  $ui-base-color: $classic-secondary-color,
+  $ui-base-lighter-color: hsl(250deg, 24%, 75%),
+  $ui-secondary-color: $classic-base-color,
 
-$ui-button-secondary-color: $grey-600 !default;
-$ui-button-secondary-border-color: $grey-600 !default;
-$ui-button-secondary-focus-color: $white !default;
+  $ui-button-secondary-color: $grey-600,
+  $ui-button-secondary-border-color: $grey-600,
+  $ui-button-secondary-focus-color: $white,
+  $ui-button-tertiary-color: $blurple-500,
+  $ui-button-tertiary-border-color: $blurple-500,
 
-$ui-button-tertiary-color: $blurple-500 !default;
-$ui-button-tertiary-border-color: $blurple-500 !default;
+  $primary-text-color: $black,
+  $darker-text-color: $classic-base-color,
+  $lighter-text-color: $classic-base-color,
+  $highlight-text-color: $classic-highlight-color,
+  $dark-text-color: hsl(240deg, 16%, 32%),
+  $light-text-color: hsl(240deg, 16%, 32%),
+  $inverted-text-color: $black,
 
-$primary-text-color: $black !default;
-$darker-text-color: $classic-base-color !default;
-$highlight-text-color: $ui-highlight-color !default;
-$dark-text-color: hsl(240deg, 16%, 32%);
-$action-button-color: hsl(240deg, 16%, 45%);
-
-$inverted-text-color: $black !default;
-$lighter-text-color: $classic-base-color !default;
-$light-text-color: hsl(240deg, 16%, 32%);
-
-// Newly added colors
-$account-background-color: $white !default;
-
-// Invert darkened and lightened colors
-@function darken($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) + $amount
-  );
-}
-
-@function lighten($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) - $amount
-  );
-}
-
-$emojis-requiring-inversion: 'chains';
-
-body {
-  --dropdown-border-color: hsl(240deg, 25%, 88%);
-  --dropdown-background-color: #fff;
-  --modal-border-color: hsl(240deg, 25%, 88%);
-  --modal-background-color: var(--background-color-tint);
-  --background-border-color: hsl(240deg, 25%, 88%);
-  --background-color: #fff;
-  --background-color-tint: rgba(255, 255, 255, 80%);
-  --background-filter: blur(10px);
-  --on-surface-color: #{transparentize($ui-base-color, 0.65)};
-  --rich-text-container-color: rgba(255, 216, 231, 100%);
-  --rich-text-text-color: rgba(114, 47, 83, 100%);
-  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
-  --input-placeholder-color: #{transparentize($dark-text-color, 0.5)};
-  --input-background-color: #{darken($ui-base-color, 10%)};
-}
+  $action-button-color: hsl(240deg, 16%, 45%),
+  $emojis-requiring-inversion: 'chains'
+);
diff --git a/app/javascript/styles/mastodon/_functions.scss b/app/javascript/styles/mastodon/_functions.scss
new file mode 100644
index 0000000000..7190a6233e
--- /dev/null
+++ b/app/javascript/styles/mastodon/_functions.scss
@@ -0,0 +1,21 @@
+@use 'sass:color';
+
+$darken-multiplier: -1 !default;
+$lighten-multiplier: 1 !default;
+
+// Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $darken-multiplier,
+    $space: hsl
+  );
+}
+
+@function lighten($color, $amount) {
+  @return color.adjust(
+    $color,
+    $lightness: $amount * $lighten-multiplier,
+    $space: hsl
+  );
+}
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index 2599cb0e05..b7d9203e3f 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 @mixin search-input {
   outline: 0;
   box-sizing: border-box;
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/_variables.scss
similarity index 69%
rename from app/javascript/styles/mastodon/variables.scss
rename to app/javascript/styles/mastodon/_variables.scss
index 32b3260634..c2664d1dcd 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'functions' as *;
 
 // Commonly used web colors
 $black: #000000; // Black
@@ -96,37 +97,13 @@ $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 1175px;
 $mobile-breakpoint: 630px;
+$no-columns-breakpoint: 600px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;
 
-:root {
-  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
-    0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
-  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
-  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
-  --modal-border-color: #{lighten($ui-base-color, 4%)};
-  --background-border-color: #{lighten($ui-base-color, 4%)};
-  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  --background-color: #{darken($ui-base-color, 8%)};
-  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --surface-background-color: #{darken($ui-base-color, 4%)};
-  --surface-variant-background-color: #{$ui-base-color};
-  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
-  --on-surface-color: #{transparentize($ui-base-color, 0.5)};
-  --avatar-border-radius: 8px;
-  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
-  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
-  --error-background-color: #{darken($error-red, 16%)};
-  --error-active-background-color: #{darken($error-red, 12%)};
-  --on-error-color: #fff;
-  --rich-text-container-color: rgba(87, 24, 60, 100%);
-  --rich-text-text-color: rgba(255, 175, 212, 100%);
-  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
-  --input-placeholder-color: #{$dark-text-color};
-  --input-background-color: var(--surface-variant-background-color);
-  --on-input-color: #{$secondary-text-color};
-}
+$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'
+  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 4d53195606..9a13034a3a 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
 
diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss
index deaa0afdac..7cd2d4eae3 100644
--- a/app/javascript/styles/mastodon/accessibility.scss
+++ b/app/javascript/styles/mastodon/accessibility.scss
@@ -1,7 +1,4 @@
-$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'
-  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
+@use 'variables' as *;
 
 %emoji-color-inversion {
   filter: invert(1);
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index c769c88f75..3544a496c7 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .card {
   & > a {
     display: block;
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 098c9ffc7f..f07048af07 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'functions' as *;
+@use 'variables' as *;
 
 $no-columns-breakpoint: 890px;
 $sidebar-width: 300px;
diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss
index dff1c76eca..96500a18bb 100644
--- a/app/javascript/styles/mastodon/annual_reports.scss
+++ b/app/javascript/styles/mastodon/annual_reports.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 :root {
   --indigo-1: #17063b;
   --indigo-2: #2f0c7a;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index ed3fe0ee0a..8d3e641eda 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 @function hex-color($color) {
   @if type-of($color) == 'color' {
     $color: str-slice(ie-hex-str($color), 4);
diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss
index d1bddc68b0..8e8dd3530b 100644
--- a/app/javascript/styles/mastodon/branding.scss
+++ b/app/javascript/styles/mastodon/branding.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .logo {
   color: $primary-text-color;
 }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 15bb8bcc80..13e6ad1b2b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1,3 +1,8 @@
+@use 'sass:color';
+@use 'variables' as *;
+@use 'functions' as *;
+@use 'mixins' as *;
+
 .app-body {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -1841,18 +1846,22 @@ body > [data-popper-placement] {
 .detailed-status__wrapper-direct {
   .detailed-status,
   .detailed-status__action-bar {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    background: color.mix($ui-base-color, $ui-highlight-color, 95%);
   }
 
   &:focus {
     .detailed-status,
     .detailed-status__action-bar {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+      background: color.mix(
+        lighten($ui-base-color, 4%),
+        $ui-highlight-color,
+        95%
+      );
     }
   }
 
   .detailed-status__action-bar {
-    border-top-color: mix(
+    border-top-color: color.mix(
       lighten($ui-base-color, 8%),
       $ui-highlight-color,
       95%
@@ -8404,7 +8413,7 @@ noscript {
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(
+      background-color: color.mix(
         lighten($ui-base-color, 12%),
         $ui-highlight-color,
         80%
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index ac1f862a09..7db9ca409d 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 .container-alt {
   width: 700px;
   margin: 0 auto;
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
new file mode 100644
index 0000000000..48de520417
--- /dev/null
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -0,0 +1,33 @@
+@use 'sass:color';
+@use 'functions' as *;
+@use 'variables' as *;
+
+:root {
+  --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)};
+  --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
+  --background-border-color: #{lighten($ui-base-color, 4%)};
+  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  --background-color: #{darken($ui-base-color, 8%)};
+  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
+  --surface-background-color: #{darken($ui-base-color, 4%)};
+  --surface-variant-background-color: #{$ui-base-color};
+  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
+  --avatar-border-radius: 8px;
+  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
+  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
+  --error-background-color: #{darken($error-red, 16%)};
+  --error-active-background-color: #{darken($error-red, 12%)};
+  --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
+  --input-placeholder-color: #{$dark-text-color};
+  --input-background-color: var(--surface-variant-background-color);
+  --on-input-color: #{$secondary-text-color};
+}
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index d049b2456c..c99cdc357a 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index 3189000588..1fde5de1dc 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 73043842a4..6ec6a4199f 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -1,4 +1,5 @@
-$no-columns-breakpoint: 600px;
+@use 'variables' as *;
+@use 'functions' as *;
 
 code {
   font-family: $font-monospace, monospace;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index 60e7d62245..7d060a2681 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .modal-layout {
   background: darken($ui-base-color, 4%)
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index ced4c60c44..f49ce3c413 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .poll {
   margin-top: 16px;
   font-size: 14px;
diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss
index d1ca4a1837..2dce637a06 100644
--- a/app/javascript/styles/mastodon/reset.scss
+++ b/app/javascript/styles/mastodon/reset.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 0a05ce7c62..6aa94a97bc 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 body.rtl {
   direction: rtl;
 
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index e2996356bf..cf06110213 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .table {
   width: 100%;
   max-width: 100%;
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index f467069052..8d09c7d583 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .directory {
   &__tag {
     box-sizing: border-box;
diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
index 2302dc40d5..10e382c01e 100644
--- a/app/javascript/styles/win95.scss
+++ b/app/javascript/styles/win95.scss
@@ -11,8 +11,10 @@ $win95-tooltip-yellow: #ffffcc;
 $win95-blue: blue;
 $win95-cyan: #008080;
 
-$ui-base-lighter-color: $win95-dark-grey;
-$ui-highlight-color: $win95-window-header;
+@use 'mastodon/variables' as * with (
+  $ui-base-lighter-color: $win95-dark-grey,
+  $ui-highlight-color: $win95-window-header
+);
 
 @mixin win95-border-outset() {
   border-left: 2px solid #efefef;