From 85dc277409e69362f65ebe349bc73e819b5e40d4 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 23 Oct 2025 10:42:42 +0200
Subject: [PATCH] Replace $ui-base-lighter-color

---
 .../styles/mastodon-light/variables.scss       |  1 -
 app/javascript/styles/mastodon/_variables.scss |  4 ----
 app/javascript/styles/mastodon/components.scss |  4 ++--
 app/javascript/styles/mastodon/forms.scss      |  9 ++++-----
 app/javascript/styles/mastodon/modal.scss      | 18 +++++++++++++++---
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 656a5d9f598..14d03f8a379 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -11,6 +11,5 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
 
 @use '../mastodon/variables' with (
   $ui-base-color: hsl(255deg, 25%, 88%),
-  $ui-base-lighter-color: hsl(250deg, 24%, 75%),
   $emojis-requiring-inversion: 'chains'
 );
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index a616afaad76..ef4a9920add 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -15,10 +15,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
 // Tell UI to use selected colors
 $ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
-$ui-base-lighter-color: lighten(
-  $ui-base-color,
-  26%
-) !default; // Lighter darkest
 
 // Keep this filter a SCSS variable rather than
 // a CSS Custom Property due to this Safari bug:
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 99832d3dc47..8f12152de93 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5376,7 +5376,7 @@ a.status-card {
   inset-inline-start: 0;
   z-index: -1;
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--clr-bg-elevated);
   box-shadow: 0 0 5px var(--clr-shadow-primary);
 }
 
@@ -5389,7 +5389,7 @@ a.status-card {
   color: var(--clr-text-primary);
   font-size: 18px;
   font-weight: 500;
-  border: 2px dashed $ui-base-lighter-color;
+  border: 2px dashed var(--clr-border-primary);
   border-radius: 4px;
 }
 
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 121a60eb94d..c34eb5dca66 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -944,9 +944,9 @@ code {
   }
 
   .permissions-list {
-    border: 1px solid $ui-base-color;
+    border: 1px solid var(--clr-border-primary);
     border-radius: 4px;
-    background: darken($ui-base-color, 4%);
+    background: var(--clr-bg-secondary);
     margin-bottom: 30px;
   }
 
@@ -1229,7 +1229,6 @@ code {
   align-items: center;
   padding-bottom: 30px;
   margin-bottom: 30px;
-  color: $white;
 
   li {
     flex: 0 0 auto;
@@ -1238,7 +1237,7 @@ code {
 
   .separator {
     height: 2px;
-    background: $ui-base-lighter-color;
+    background: var(--clr-border-primary);
     flex: 1 1 auto;
 
     &.completed {
@@ -1252,7 +1251,7 @@ code {
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    border: 2px solid $ui-base-lighter-color;
+    border: 2px solid var(--clr-border-primary);
     flex: 0 0 auto;
     display: flex;
     align-items: center;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index 7d060a2681a..761e7f9ea5c 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -2,13 +2,25 @@
 @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>')
-    repeat-x bottom fixed;
+  background: var(--clr-bg-accent-subtle);
   display: flex;
   flex-direction: column;
   height: 100vh;
   padding: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: auto 0 0;
+    height: 32px;
+    background-color: var(--clr-bg-accent-subtle);
+
+    /* Decorative zig-zag pattern at the bottom of the page */
+    mask-image: 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="black"/></svg>');
+    mask-position: bottom;
+    mask-repeat: repeat-x;
+    z-index: -1;
+  }
 }
 
 .modal-layout__mastodon {