From 8a3bed1933b7afdaa196639b753f41e743c4491a Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Thu, 27 Mar 2025 14:09:42 +0100
Subject: [PATCH] Fix SASS deprecation notices (#34278)
---
app/javascript/styles/application.scss | 50 ++++----
app/javascript/styles/contrast.scss | 6 +-
app/javascript/styles/contrast/diff.scss | 2 +
app/javascript/styles/contrast/variables.scss | 21 ++--
app/javascript/styles/mailer.scss | 2 +-
app/javascript/styles/mastodon-light.scss | 7 +-
.../styles/mastodon-light/css_variables.scss | 21 ++++
.../styles/mastodon-light/diff.scss | 15 ++-
.../styles/mastodon-light/variables.scss | 108 ++++++------------
.../styles/mastodon/_functions.scss | 21 ++++
app/javascript/styles/mastodon/_mixins.scss | 2 +
.../{variables.scss => _variables.scss} | 35 +-----
app/javascript/styles/mastodon/about.scss | 2 +
.../styles/mastodon/accessibility.scss | 5 +-
app/javascript/styles/mastodon/accounts.scss | 3 +
app/javascript/styles/mastodon/admin.scss | 2 +
.../styles/mastodon/annual_reports.scss | 2 +
app/javascript/styles/mastodon/basics.scss | 3 +
app/javascript/styles/mastodon/branding.scss | 2 +
.../styles/mastodon/components.scss | 17 ++-
.../styles/mastodon/containers.scss | 2 +
.../styles/mastodon/css_variables.scss | 33 ++++++
app/javascript/styles/mastodon/dashboard.scss | 3 +
.../styles/mastodon/emoji_picker.scss | 3 +
app/javascript/styles/mastodon/forms.scss | 3 +-
app/javascript/styles/mastodon/modal.scss | 3 +
app/javascript/styles/mastodon/polls.scss | 3 +
app/javascript/styles/mastodon/reset.scss | 2 +
app/javascript/styles/mastodon/rtl.scss | 3 +
app/javascript/styles/mastodon/tables.scss | 3 +
app/javascript/styles/mastodon/widgets.scss | 3 +
31 files changed, 232 insertions(+), 155 deletions(-)
create mode 100644 app/javascript/styles/mastodon-light/css_variables.scss
create mode 100644 app/javascript/styles/mastodon/_functions.scss
rename app/javascript/styles/mastodon/{variables.scss => _variables.scss} (69%)
create mode 100644 app/javascript/styles/mastodon/css_variables.scss
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 4a28058544..d54f494b62 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 7e045a0d8a..b4a31de811 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;