From 38b9803b4c6d4e5a8acf9dec03aeb31592c846ac Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 24 Oct 2025 10:06:34 +0200
Subject: [PATCH] Replace $black

---
 app/javascript/styles/mastodon/_variables.scss |  1 -
 app/javascript/styles/mastodon/admin.scss      |  8 ++++----
 app/javascript/styles/mastodon/components.scss | 10 +++++-----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index f2587083a67..d52c4e53867 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -1,5 +1,4 @@
 // Commonly used web colors
-$black: #000; // Black
 $white: #fff; // White
 
 // Keep this filter a SCSS variable rather than
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 4d2e0542487..43afa8f5635 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -2058,7 +2058,7 @@ a.sparkline {
     }
 
     .spoiler-button__overlay__label {
-      outline: 1px solid var(--media-outline-color);
+      outline: 1px solid var(--clr-border-media);
     }
 
     .hide-button {
@@ -2069,8 +2069,8 @@ a.sparkline {
       right: 5px;
       color: $white;
       border: 0;
-      outline: 1px solid var(--media-outline-color);
-      background-color: color.change($black, $alpha: 0.45);
+      outline: 1px solid var(--clr-border-media);
+      background-color: rgb(from var(--clr-bg-media) r g b / 45%);
       backdrop-filter: $backdrop-blur-filter;
       padding: 3px 12px;
       border-radius: 99px;
@@ -2080,7 +2080,7 @@ a.sparkline {
 
       &:hover,
       &:focus {
-        background-color: color.change($black, $alpha: 0.9);
+        background-color: rgb(from var(--clr-bg-media) r g b / 90%);
       }
     }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7a9048f85fc..ab9ea84790c 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4924,7 +4924,7 @@ a.status-card {
     font-size: 14px;
 
     &__label {
-      background-color: color.change($black, $alpha: 0.45);
+      background-color: rgb(from var(--clr-bg-media) r g b / 45%);
       backdrop-filter: $backdrop-blur-filter;
       border-radius: 8px;
       padding: 12px 16px;
@@ -4944,7 +4944,7 @@ a.status-card {
     &:hover,
     &:focus {
       .spoiler-button__overlay__label {
-        background-color: color.change($black, $alpha: 0.9);
+        background-color: rgb(from var(--clr-bg-media) r g b / 90%);
       }
     }
   }
@@ -6997,7 +6997,7 @@ a.status-card {
     display: block;
     color: $white;
     border: 0;
-    background: color.change($black, $alpha: 0.65);
+    background: rgb(from var(--clr-bg-media) r g b / 65%);
     backdrop-filter: $backdrop-blur-filter;
     padding: 3px 12px;
     border-radius: 99px;
@@ -7022,7 +7022,7 @@ a.status-card {
   text-align: center;
   color: $white;
   border: 0;
-  background: color.change($black, $alpha: 0.65);
+  background: rgb(from var(--clr-bg-media) r g b / 65%);
   backdrop-filter: $backdrop-blur-filter;
   padding: 3px 8px;
   border-radius: 4px;
@@ -7045,7 +7045,7 @@ a.status-card {
 
 .info-tooltip {
   color: var(--clr-text-on-media);
-  background: var(--clr-bg-media);
+  background: rgb(from var(--clr-bg-media) r g b / 65%);
   backdrop-filter: $backdrop-blur-filter;
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);