From e4bb347f727431bca204dcd9a955105421980360 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 12 Feb 2026 12:33:28 +0100
Subject: [PATCH] Theme tokens sync (#37841)

---
 .../form_fields/combobox.module.scss          |  2 +-
 .../components/redesign.module.scss           |  4 +-
 .../account_timeline/v2/styles.module.scss    |  2 +-
 app/javascript/styles/mastodon/_mixins.scss   |  2 +-
 .../styles/mastodon/components.scss           | 30 ++++----
 .../styles/mastodon/theme/_base.scss          | 39 +++++++----
 .../styles/mastodon/theme/_dark.scss          | 70 +++++++------------
 .../styles/mastodon/theme/_light.scss         | 53 +++++---------
 8 files changed, 87 insertions(+), 115 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/combobox.module.scss b/app/javascript/mastodon/components/form_fields/combobox.module.scss
index 98c0db9f61..4b5bfef1af 100644
--- a/app/javascript/mastodon/components/form_fields/combobox.module.scss
+++ b/app/javascript/mastodon/components/form_fields/combobox.module.scss
@@ -28,7 +28,7 @@
   padding: 4px;
   border-radius: 4px;
   color: var(--color-text-primary);
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   box-shadow: var(--dropdown-shadow);
 
diff --git a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
index 3d360bfdd2..bbd32d579c 100644
--- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
@@ -272,7 +272,7 @@ svg.badgeIcon {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--color-bg-elevated);
+  background-color: var(--color-bg-primary);
   box-shadow: 0 1px 4px 0 var(--color-shadow-primary);
   border-radius: 9999px;
   transition:
@@ -295,7 +295,7 @@ svg.badgeIcon {
     background-color: color-mix(
       in oklab,
       var(--color-bg-brand-base) var(--overlay-strength-brand),
-      var(--color-bg-elevated)
+      var(--color-bg-primary)
     );
   }
 }
diff --git a/app/javascript/mastodon/features/account_timeline/v2/styles.module.scss b/app/javascript/mastodon/features/account_timeline/v2/styles.module.scss
index 469ac3a894..e16eca5254 100644
--- a/app/javascript/mastodon/features/account_timeline/v2/styles.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/v2/styles.module.scss
@@ -24,7 +24,7 @@
 }
 
 .filterOverlay {
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   border-radius: 12px;
   box-shadow: var(--dropdown-shadow);
   min-width: 230px;
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index effbe82c3d..a8c3604dc5 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -14,7 +14,7 @@
 }
 
 @mixin search-popout {
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   border-radius: 4px;
   padding: 10px 14px;
   padding-bottom: 14px;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ee2da64519..931a04e5ac 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -411,7 +411,7 @@ body > [data-popper-placement] {
 
   &__suggestions {
     box-shadow: var(--dropdown-shadow);
-    background: var(--color-bg-elevated);
+    background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: 0 0 4px 4px;
     color: var(--color-text-primary);
@@ -2066,7 +2066,7 @@ body > [data-popper-placement] {
     }
 
     &__popout {
-      background: var(--color-bg-elevated);
+      background: var(--color-bg-primary);
       backdrop-filter: $backdrop-blur-filter;
       border: 1px solid var(--color-border-primary);
       box-shadow: var(--dropdown-shadow);
@@ -2770,7 +2770,7 @@ a.account__display-name {
 }
 
 .dropdown-menu {
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--color-border-primary);
   padding: 4px;
@@ -5169,7 +5169,7 @@ a.status-card {
       @include search-popout;
 
       padding: 0;
-      background: var(--color-bg-elevated);
+      background: var(--color-bg-primary);
     }
 
     &__menu-list {
@@ -5339,7 +5339,7 @@ a.status-card {
   position: relative;
   margin-top: 5px;
   z-index: 2;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--color-border-primary);
   box-shadow: var(--dropdown-shadow);
@@ -5366,7 +5366,7 @@ a.status-card {
   z-index: 4;
   top: -5px;
   inset-inline-start: -9px;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
@@ -5433,7 +5433,7 @@ a.status-card {
   inset-inline-start: 0;
   z-index: -1;
   border-radius: 4px;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   box-shadow: 0 0 5px var(--color-shadow-primary);
 }
 
@@ -5538,7 +5538,7 @@ a.status-card {
 .language-dropdown__dropdown,
 .visibility-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   padding: 4px;
   border-radius: 4px;
@@ -5653,7 +5653,7 @@ a.status-card {
 
     .emoji-mart-search {
       padding: 10px;
-      background: var(--color-bg-elevated);
+      background: var(--color-bg-primary);
 
       input {
         padding: 8px 12px;
@@ -5686,7 +5686,7 @@ a.status-card {
 
     .emoji-mart-scroll {
       padding: 0 10px 10px;
-      background: var(--color-bg-elevated);
+      background: var(--color-bg-primary);
     }
 
     &__results {
@@ -5812,7 +5812,7 @@ a.status-card {
     inset-inline-start: 0;
     margin-top: -2px;
     width: 100%;
-    background: var(--color-bg-elevated);
+    background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
@@ -6569,7 +6569,7 @@ a.status-card {
   width: 588px;
   max-height: 80vh;
   flex-direction: column;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--color-border-primary);
   border-radius: 16px;
@@ -6653,7 +6653,7 @@ a.status-card {
   }
 
   &__popout {
-    background: var(--color-bg-elevated);
+    background: var(--color-bg-primary);
     backdrop-filter: $backdrop-blur-filter;
     border: 1px solid var(--color-border-primary);
     box-shadow: var(--dropdown-shadow);
@@ -6935,7 +6935,7 @@ a.status-card {
 
 .actions-modal {
   border-radius: 8px 8px 0 0;
-  background: var(--color-bg-elevated);
+  background: var(--color-bg-primary);
   backdrop-filter: $backdrop-blur-filter;
   border-color: var(--color-border-primary);
   box-shadow: var(--dropdown-shadow);
@@ -7123,7 +7123,7 @@ a.status-card {
 
   &--solid {
     color: var(--color-text-primary);
-    background: var(--color-bg-elevated);
+    background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
   }
 
diff --git a/app/javascript/styles/mastodon/theme/_base.scss b/app/javascript/styles/mastodon/theme/_base.scss
index 94d592aa70..85fd0dab45 100644
--- a/app/javascript/styles/mastodon/theme/_base.scss
+++ b/app/javascript/styles/mastodon/theme/_base.scss
@@ -1,27 +1,40 @@
 @mixin palette {
   --color-black: #000;
-  --color-grey-950: #181821;
-  --color-grey-800: #292938;
-  --color-grey-700: #444664;
-  --color-grey-600: #545778;
-  --color-grey-500: #696d91;
-  --color-grey-400: #8b8dac;
-  --color-grey-300: #b4b6cb;
-  --color-grey-200: #d8d9e3;
-  --color-grey-100: #f0f0f5;
-  --color-grey-50: #f0f1ff;
+  --color-grey-950: #181820;
+  --color-grey-800: #3a3a50;
+  --color-grey-700: #44445f;
+  --color-grey-600: #535374;
+  --color-grey-500: #67678e;
+  --color-grey-400: #88a;
+  --color-grey-300: #b2b1c8;
+  --color-grey-200: #d7d6e1;
+  --color-grey-100: #eeedf3;
+  --color-grey-50: #f6f6f9;
   --color-white: #fff;
+  --color-indigo-700: #5638cc;
   --color-indigo-600: #6147e6;
-  --color-indigo-400: #8886ff;
+  --color-indigo-400: #8280f9;
   --color-indigo-300: #a5abfd;
   --color-indigo-200: #c8cdfe;
   --color-indigo-100: #e0e3ff;
   --color-indigo-50: #f0f1ff;
-  --color-red-500: #ff637e;
-  --color-red-600: #ec003f;
+  --color-red-50: #fef2f2;
+  --color-red-100: #ffe2e2;
+  --color-red-300: #ffa2a2;
+  --color-red-800: #9f0712;
+  --color-red-900: #82181a;
+  --color-red-950: #460809;
+  --color-yellow-50: #fffbeb;
+  --color-yellow-100: #fef3c6;
   --color-yellow-400: #ffb900;
   --color-yellow-600: #e17100;
   --color-yellow-700: #bb4d00;
+  --color-yellow-900: #7b3306;
+  --color-yellow-950: #461901;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
   --color-green-400: #05df72;
   --color-green-600: #00a63e;
+  --color-green-900: #0d542b;
+  --color-green-950: #032e15;
 }
diff --git a/app/javascript/styles/mastodon/theme/_dark.scss b/app/javascript/styles/mastodon/theme/_dark.scss
index 9485464e09..9af3385d45 100644
--- a/app/javascript/styles/mastodon/theme/_dark.scss
+++ b/app/javascript/styles/mastodon/theme/_dark.scss
@@ -3,11 +3,11 @@
 @mixin tokens {
   /* TEXT TOKENS */
 
-  --color-text-primary: var(--color-grey-50);
-  --color-text-secondary: var(--color-grey-400);
-  --color-text-tertiary: var(--color-grey-500);
+  --color-text-primary: var(--color-grey-100);
+  --color-text-secondary: var(--color-grey-300);
+  --color-text-tertiary: var(--color-grey-400);
   --color-text-on-inverted: var(--color-grey-950);
-  --color-text-brand: var(--color-indigo-400);
+  --color-text-brand: var(--color-indigo-300);
   --color-text-brand-soft: color-mix(
     in oklab,
     var(--color-text-primary),
@@ -15,7 +15,7 @@
   );
   --color-text-on-brand-base: var(--color-white);
   --color-text-brand-on-inverted: var(--color-indigo-600);
-  --color-text-error: var(--color-red-500);
+  --color-text-error: var(--color-red-300);
   --color-text-on-error-base: var(--color-white);
   --color-text-warning: var(--color-yellow-400);
   --color-text-on-warning-base: var(--color-white);
@@ -36,8 +36,8 @@
 
   // Neutrals
   --color-bg-primary: var(--color-grey-950);
-  --overlay-strength-secondary: 8%;
-  --color-bg-secondary-base: var(--color-indigo-200);
+  --overlay-strength-secondary: 4%;
+  --color-bg-secondary-base: var(--color-white);
   --color-bg-secondary: #{utils.css-alpha(
       var(--color-bg-secondary-base),
       var(--overlay-strength-secondary)
@@ -55,7 +55,6 @@
 
   // Utility
   --color-bg-ambient: var(--color-bg-primary);
-  --color-bg-elevated: var(--color-bg-primary);
   --color-bg-inverted: var(--color-grey-50);
   --color-bg-media-base: var(--color-black);
   --color-bg-media-strength: 65%;
@@ -67,16 +66,16 @@
   --color-bg-disabled: var(--color-grey-700);
 
   // Brand
-  --overlay-strength-brand: 10%;
-  --color-bg-brand-base: var(--color-indigo-600);
+  --overlay-strength-brand: 22%;
+  --color-bg-brand-base: var(--color-indigo-700);
   --color-bg-brand-base-hover: color-mix(
     in oklab,
     var(--color-bg-brand-base),
-    black var(--overlay-strength-brand)
+    var(--color-bg-primary) var(--overlay-strength-brand)
   );
   --color-bg-brand-soft: #{utils.css-alpha(
-      var(--color-bg-brand-base),
-      calc(var(--overlay-strength-brand) * 1.5)
+      #6f4df5,
+      calc(var(--overlay-strength-brand) * 2)
     )};
   --color-bg-brand-softer: #{utils.css-alpha(
       var(--color-bg-brand-base),
@@ -84,21 +83,15 @@
     )};
 
   // Error
-  --overlay-strength-error: 12%;
-  --color-bg-error-base: var(--color-red-600);
+  --overlay-strength-error: 10%;
+  --color-bg-error-base: var(--color-red-800);
   --color-bg-error-base-hover: color-mix(
     in oklab,
     var(--color-bg-error-base),
-    black var(--overlay-strength-error)
+    var(--color-bg-primary) var(--overlay-strength-error)
   );
-  --color-bg-error-soft: #{utils.css-alpha(
-      var(--color-bg-error-base),
-      calc(var(--overlay-strength-error) * 1.5)
-    )};
-  --color-bg-error-softer: #{utils.css-alpha(
-      var(--color-bg-error-base),
-      var(--overlay-strength-error)
-    )};
+  --color-bg-error-soft: var(--color-red-900);
+  --color-bg-error-softer: var(--color-red-950);
 
   // Warning
   --overlay-strength-warning: 10%;
@@ -106,16 +99,10 @@
   --color-bg-warning-base-hover: color-mix(
     in oklab,
     var(--color-bg-warning-base),
-    black var(--overlay-strength-warning)
+    var(--color-bg-primary) var(--overlay-strength-warning)
   );
-  --color-bg-warning-soft: #{utils.css-alpha(
-      var(--color-bg-warning-base),
-      calc(var(--overlay-strength-warning) * 1.5)
-    )};
-  --color-bg-warning-softer: #{utils.css-alpha(
-      var(--color-bg-warning-base),
-      var(--overlay-strength-warning)
-    )};
+  --color-bg-warning-soft: var(--color-yellow-900);
+  --color-bg-warning-softer: var(--color-yellow-950);
 
   // Success
   --overlay-strength-success: 15%;
@@ -123,16 +110,10 @@
   --color-bg-success-base-hover: color-mix(
     in oklab,
     var(--color-bg-success-base),
-    black var(--overlay-strength-success)
+    var(--color-bg-primary) var(--overlay-strength-success)
   );
-  --color-bg-success-soft: #{utils.css-alpha(
-      var(--color-bg-success-base),
-      calc(var(--overlay-strength-success) * 1.5)
-    )};
-  --color-bg-success-softer: #{utils.css-alpha(
-      var(--color-bg-success-base),
-      var(--overlay-strength-success)
-    )};
+  --color-bg-success-soft: var(--color-green-900);
+  --color-bg-success-softer: var(--color-green-950);
 
   /* BORDER TOKENS */
 
@@ -194,12 +175,9 @@
   /* TEXT TOKENS */
 
   --color-text-primary: var(--color-grey-50);
-  --color-text-secondary: var(--color-grey-300);
-  --color-text-tertiary: var(--color-grey-400);
-  --color-text-brand: var(--color-indigo-300);
   --color-text-status-links: var(--color-text-brand);
 
   /* BORDER TOKENS */
 
-  --border-strength-primary: 18%;
+  --border-strength-primary: 30%;
 }
diff --git a/app/javascript/styles/mastodon/theme/_light.scss b/app/javascript/styles/mastodon/theme/_light.scss
index 534a18367c..64390017b3 100644
--- a/app/javascript/styles/mastodon/theme/_light.scss
+++ b/app/javascript/styles/mastodon/theme/_light.scss
@@ -7,7 +7,7 @@
   --color-text-secondary: var(--color-grey-600);
   --color-text-tertiary: var(--color-grey-500);
   --color-text-on-inverted: var(--color-white);
-  --color-text-brand: var(--color-indigo-600);
+  --color-text-brand: var(--color-indigo-700);
   --color-text-brand-soft: color-mix(
     in oklab,
     var(--color-text-primary),
@@ -15,7 +15,7 @@
   );
   --color-text-on-brand-base: var(--color-white);
   --color-text-brand-on-inverted: var(--color-indigo-400);
-  --color-text-error: var(--color-red-600);
+  --color-text-error: var(--color-red-800);
   --color-text-on-error-base: var(--color-white);
   --color-text-warning: var(--color-yellow-600);
   --color-text-on-warning-base: var(--color-white);
@@ -32,8 +32,8 @@
 
   // Neutrals
   --color-bg-primary: var(--color-white);
-  --overlay-strength-secondary: 5%;
-  --color-bg-secondary-base: var(--color-grey-600);
+  --overlay-strength-secondary: 4%;
+  --color-bg-secondary-base: #000550;
   --color-bg-secondary: #{color-mix(
       in oklab,
       var(--color-bg-primary),
@@ -52,7 +52,6 @@
 
   // Utility
   --color-bg-ambient: var(--color-bg-primary);
-  --color-bg-elevated: var(--color-bg-primary);
   --color-bg-inverted: var(--color-grey-950);
   --color-bg-media-base: var(--color-black);
   --color-bg-media-strength: 65%;
@@ -64,38 +63,32 @@
   --color-bg-disabled: var(--color-grey-400);
 
   // Brand
-  --overlay-strength-brand: 8%;
-  --color-bg-brand-base: var(--color-indigo-600);
+  --overlay-strength-brand: 6%;
+  --color-bg-brand-base: var(--color-indigo-700);
   --color-bg-brand-base-hover: color-mix(
     in oklab,
     var(--color-bg-brand-base),
     black var(--overlay-strength-brand)
   );
   --color-bg-brand-soft: #{utils.css-alpha(
-      var(--color-bg-brand-base),
-      calc(var(--overlay-strength-brand) * 1.5)
+      #0012d8,
+      calc(var(--overlay-strength-brand) * 2)
     )};
   --color-bg-brand-softer: #{utils.css-alpha(
-      var(--color-bg-brand-base),
+      #0012d8,
       var(--overlay-strength-brand)
     )};
 
   // Error
-  --overlay-strength-error: 12%;
-  --color-bg-error-base: var(--color-red-600);
+  --overlay-strength-error: 5%;
+  --color-bg-error-base: var(--color-red-800);
   --color-bg-error-base-hover: color-mix(
     in oklab,
     var(--color-bg-error-base),
     black var(--overlay-strength-error)
   );
-  --color-bg-error-soft: #{utils.css-alpha(
-      var(--color-bg-error-base),
-      calc(var(--overlay-strength-error) * 1.5)
-    )};
-  --color-bg-error-softer: #{utils.css-alpha(
-      var(--color-bg-error-base),
-      var(--overlay-strength-error)
-    )};
+  --color-bg-error-soft: var(--color-red-100);
+  --color-bg-error-softer: var(--color-red-50);
 
   // Warning
   --overlay-strength-warning: 10%;
@@ -105,14 +98,8 @@
     var(--color-bg-warning-base),
     black var(--overlay-strength-warning)
   );
-  --color-bg-warning-soft: #{utils.css-alpha(
-      var(--color-bg-warning-base),
-      calc(var(--overlay-strength-warning) * 1.5)
-    )};
-  --color-bg-warning-softer: #{utils.css-alpha(
-      var(--color-bg-warning-base),
-      var(--overlay-strength-warning)
-    )};
+  --color-bg-warning-soft: var(--color-yellow-100);
+  --color-bg-warning-softer: var(--color-yellow-50);
 
   // Success
   --overlay-strength-success: 15%;
@@ -122,14 +109,8 @@
     var(--color-bg-success-base),
     black var(--overlay-strength-success)
   );
-  --color-bg-success-soft: #{utils.css-alpha(
-      var(--color-bg-success-base),
-      calc(var(--overlay-strength-success) * 1.5)
-    )};
-  --color-bg-success-softer: #{utils.css-alpha(
-      var(--color-bg-success-base),
-      var(--overlay-strength-success)
-    )};
+  --color-bg-success-soft: var(--color-green-100);
+  --color-bg-success-softer: var(--color-green-50);
 
   /* BORDER TOKENS */