Fix SASS deprecation notices (#34278)

app/javascript/styles/application.scss

@@ -1,25 +1,27 @@
-@import 'mastodon/mixins';
+@use 'mastodon/functions';
-@import 'mastodon/variables';
+@use 'mastodon/mixins';
-@import 'fonts/roboto';
+@use 'mastodon/variables';
-@import 'fonts/roboto-mono';
+@use 'mastodon/css_variables';
+@use 'fonts/roboto';
+@use 'fonts/roboto-mono';
 
-@import 'mastodon/reset';
+@use 'mastodon/reset';
-@import 'mastodon/basics';
+@use 'mastodon/basics';
-@import 'mastodon/branding';
+@use 'mastodon/branding';
-@import 'mastodon/containers';
+@use 'mastodon/containers';
-@import 'mastodon/lists';
+@use 'mastodon/lists';
-@import 'mastodon/widgets';
+@use 'mastodon/widgets';
-@import 'mastodon/forms';
+@use 'mastodon/forms';
-@import 'mastodon/accounts';
+@use 'mastodon/accounts';
-@import 'mastodon/components';
+@use 'mastodon/components';
-@import 'mastodon/polls';
+@use 'mastodon/polls';
-@import 'mastodon/modal';
+@use 'mastodon/modal';
-@import 'mastodon/emoji_picker';
+@use 'mastodon/emoji_picker';
-@import 'mastodon/annual_reports';
+@use 'mastodon/annual_reports';
-@import 'mastodon/about';
+@use 'mastodon/about';
-@import 'mastodon/tables';
+@use 'mastodon/tables';
-@import 'mastodon/admin';
+@use 'mastodon/admin';
-@import 'mastodon/dashboard';
+@use 'mastodon/dashboard';
-@import 'mastodon/rtl';
+@use 'mastodon/rtl';
-@import 'mastodon/accessibility';
+@use 'mastodon/accessibility';
-@import 'mastodon/rich_text';
+@use 'mastodon/rich_text';

app/javascript/styles/contrast.scss

@@ -1,3 +1,3 @@
-@import 'contrast/variables';
+@use 'contrast/variables';
-@import 'application';
+@use 'application';
-@import 'contrast/diff';
+@use 'contrast/diff';

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,

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;
+@use '../mastodon/variables' with (
-$dark-text-color: lighten($ui-primary-color, 12%) !default;
+  $darker-text-color: lighten($ui-primary-color, 20%),
-$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
+  $dark-text-color: lighten($ui-primary-color, 12%),
-$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
+  $secondary-text-color: lighten($ui-secondary-color, 6%),
-$action-button-color: lighten($ui-base-color, 50%);
+  $highlight-text-color: lighten($ui-highlight-color, 10%),
-
+  $action-button-color: lighten($ui-base-color, 50%),
-$inverted-text-color: $black !default;
+  $inverted-text-color: $black,
-$lighter-text-color: darken($ui-base-color, 6%) !default;
+  $lighter-text-color: darken($ui-base-color, 6%),
-$light-text-color: darken($ui-primary-color, 40%) !default;
+  $light-text-color: darken($ui-primary-color, 40%)
+);

app/javascript/styles/mailer.scss

@@ -1,4 +1,4 @@
-@import 'fonts/inter';
+@use 'fonts/inter';
 
 body {
   accent-color: #6364ff;

app/javascript/styles/mastodon-light.scss

@@ -1,3 +1,4 @@
-@import 'mastodon-light/variables';
+@use 'mastodon-light/variables';
-@import 'application';
+@use 'mastodon-light/css_variables';
-@import 'mastodon-light/diff';
+@use 'application';
+@use 'mastodon-light/diff';

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

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%);
+  background-color: color.mix($white, $ui-highlight-color, 80%);
-  border-color: mix(lighten($ui-base-color, 8%), $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,

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

@@ -1,84 +1,46 @@
 @use 'sass:color';
 
-// Dependent colors
+@use '../mastodon/functions' with (
-$black: #000000;
+  $darken-multiplier: 1,
-$white: #ffffff;
+  $lighten-multiplier: -1
+);
 
-$classic-base-color: hsl(240deg, 16%, 19%);
+$black: #000000; // Black
-$classic-primary-color: hsl(240deg, 29%, 70%);
+$white: #ffffff; // White
-$classic-secondary-color: hsl(255deg, 25%, 88%);
+$blurple-500: #6364ff; // Brand purple
-$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
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-// Differences
+$classic-base-color: hsl(240deg, 16%, 19%);
-$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
+$classic-secondary-color: hsl(255deg, 25%, 88%);
+$classic-highlight-color: $blurple-500;
 
-$base-overlay-background: $white !default;
+@use '../mastodon/variables' with (
-$valid-value-color: $success-green !default;
+  $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-color: $classic-secondary-color,
-$ui-base-lighter-color: hsl(250deg, 24%, 75%);
+  $ui-base-lighter-color: hsl(250deg, 24%, 75%),
-$ui-primary-color: $classic-primary-color !default;
+  $ui-secondary-color: $classic-base-color,
-$ui-secondary-color: $classic-base-color !default;
-$ui-highlight-color: $classic-highlight-color !default;
 
-$ui-button-secondary-color: $grey-600 !default;
+  $ui-button-secondary-color: $grey-600,
-$ui-button-secondary-border-color: $grey-600 !default;
+  $ui-button-secondary-border-color: $grey-600,
-$ui-button-secondary-focus-color: $white !default;
+  $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;
+  $primary-text-color: $black,
-$ui-button-tertiary-border-color: $blurple-500 !default;
+  $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;
+  $action-button-color: hsl(240deg, 16%, 45%),
-$darker-text-color: $classic-base-color !default;
+  $emojis-requiring-inversion: 'chains'
-$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%)};
-}

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

app/javascript/styles/mastodon/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 @mixin search-input {
   outline: 0;
   box-sizing: border-box;

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 {
+$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
-  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
+  'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
-  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
+  'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
-  --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
+  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
-    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};
-}

app/javascript/styles/mastodon/about.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
 

app/javascript/styles/mastodon/accessibility.scss

@@ -1,7 +1,4 @@
-$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
+@use 'variables' as *;
-  '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;
 
 %emoji-color-inversion {
   filter: invert(1);

app/javascript/styles/mastodon/accounts.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .card {
   & > a {
     display: block;

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;

app/javascript/styles/mastodon/annual_reports.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 :root {
   --indigo-1: #17063b;
   --indigo-2: #2f0c7a;

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

app/javascript/styles/mastodon/branding.scss

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

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%

app/javascript/styles/mastodon/containers.scss

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

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};
+}

app/javascript/styles/mastodon/dashboard.scss

@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;

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;

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;

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>')

app/javascript/styles/mastodon/polls.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .poll {
   margin-top: 16px;
   font-size: 14px;

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)

app/javascript/styles/mastodon/rtl.scss

@@ -1,3 +1,6 @@
+@use 'functions' as *;
+@use 'variables' as *;
+
 body.rtl {
   direction: rtl;
 

app/javascript/styles/mastodon/tables.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .table {
   width: 100%;
   max-width: 100%;

app/javascript/styles/mastodon/widgets.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
 .directory {
   &__tag {
     box-sizing: border-box;