From adf82541e751a785e15754a27118b8cce2fa3e89 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 22 Oct 2025 15:13:43 +0200
Subject: [PATCH] Replace @ui-button variables

---
 .../styles/mastodon-light/variables.scss      |  4 ----
 .../styles/mastodon/_variables.scss           | 15 -------------
 app/javascript/styles/mastodon/basics.scss    |  2 +-
 .../styles/mastodon/components.scss           | 22 +++++++++----------
 4 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index e0542065c8..58ef93961d 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -13,9 +13,5 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
   $ui-base-color: hsl(255deg, 25%, 88%),
   $ui-base-lighter-color: hsl(250deg, 24%, 75%),
   $ui-secondary-color: hsl(240deg, 16%, 19%),
-  $ui-button-secondary-color: $grey-600,
-  $ui-button-secondary-border-color: $grey-600,
-  $ui-button-secondary-focus-color: $white,
-
   $emojis-requiring-inversion: 'chains'
 );
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index 03760972b2..2726447f16 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -20,21 +20,6 @@ $ui-base-lighter-color: lighten(
   26%
 ) !default; // Lighter darkest
 $ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
-$ui-button-color: $white !default;
-$ui-button-background-color: $blurple-500 !default;
-$ui-button-focus-background-color: $blurple-600 !default;
-$ui-button-focus-outline-color: $blurple-400 !default;
-$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
-
-$ui-button-disabled-color: color.adjust(
-  $ui-button-background-color,
-  $alpha: -0.3
-) !default;
-
-$ui-button-secondary-color: $blurple-500 !default;
-$ui-button-secondary-border-color: $blurple-500 !default;
-$ui-button-secondary-focus-border-color: $blurple-300 !default;
-$ui-button-secondary-focus-color: $blurple-300 !default;
 
 // Keep this filter a SCSS variable rather than
 // a CSS Custom Property due to this Safari bug:
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index f3ad228308..ac70cc8315 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -158,7 +158,7 @@ body {
 a {
   &:focus {
     border-radius: 4px;
-    outline: $ui-button-focus-outline;
+    outline: var(--outline-focus-default);
   }
 
   &:focus:not(:focus-visible) {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 1693a68201..e04fd8b77d 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -56,9 +56,9 @@
 }
 
 .help-button {
-  background: $ui-button-background-color;
+  color: var(--clr-text-on-accent-strong);
+  background: var(--clr-bg-accent-strong);
   border: 0;
-  color: $ui-button-color;
   border-radius: 20px;
   cursor: pointer;
   width: 24px;
@@ -70,7 +70,7 @@
   &:active,
   &:focus,
   &:hover {
-    background-color: $ui-button-focus-background-color;
+    background: var(--clr-bg-accent-strong-highlighted);
   }
 
   &:focus-visible {
@@ -2241,8 +2241,8 @@ body > [data-popper-placement] {
     border-radius: $height;
     min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
     line-height: $height + 1px; // to visually center the numbers
-    background-color: $ui-button-background-color;
-    color: $white;
+    color: var(--clr-text-on-accent-strong);
+    background: var(--clr-bg-accent-strong);
     border-width: 1px;
     border-style: solid;
     border-color: var(--clr-bg-primary);
@@ -5936,7 +5936,7 @@ a.status-card {
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px $ui-button-focus-outline-color;
+    box-shadow: 0 0 0 2px var(--clr-text-accent);
   }
 
   &[aria-hidden='true'] {
@@ -9128,7 +9128,7 @@ noscript {
   }
 
   &:focus-visible {
-    outline: $ui-button-focus-outline;
+    outline: var(--clr-text-accent);
     border-color: transparent;
   }
 }
@@ -10639,8 +10639,8 @@ noscript {
   }
 
   &__badge {
-    background: $ui-button-background-color;
-    color: $white;
+    color: var(--clr-text-on-accent-strong);
+    background: var(--clr-bg-accent-strong);
     border-radius: 100px;
     padding: 2px 8px;
   }
@@ -10708,10 +10708,10 @@ noscript {
     }
 
     .filtered-notifications-banner__badge {
-      background: $ui-button-background-color;
+      color: var(--clr-text-on-accent-strong);
+      background: var(--clr-bg-accent-strong);
       border-radius: 4px;
       padding: 1px 6px;
-      color: $white;
     }
   }