From 8b7f93cc7fa7a8421ceddeaa79e487360a4ad223 Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 23 Jul 2024 10:30:45 -0500
Subject: [PATCH] Recolor Preferences/Admin UI to better match main design
 (#31034)

---
 .../styles/mastodon-light/diff.scss           | 106 ++++++++---
 app/javascript/styles/mastodon/accounts.scss  |  10 +-
 app/javascript/styles/mastodon/admin.scss     | 176 ++++++++++--------
 app/javascript/styles/mastodon/basics.scss    |   2 +-
 .../styles/mastodon/components.scss           |  23 ++-
 .../styles/mastodon/containers.scss           |   2 +-
 app/javascript/styles/mastodon/dashboard.scss |   5 +-
 .../styles/mastodon/emoji_picker.scss         |   2 +-
 app/javascript/styles/mastodon/forms.scss     |  35 ++--
 app/javascript/styles/mastodon/rtl.scss       |   2 +-
 app/javascript/styles/mastodon/tables.scss    |  68 ++++---
 app/javascript/styles/mastodon/widgets.scss   |   8 +-
 app/views/admin/roles/index.html.haml         |   4 +-
 .../registrations/_account_warning.html.haml  |  12 +-
 14 files changed, 266 insertions(+), 189 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index a41272364a..635bab5460 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -23,7 +23,7 @@ html {
 // Change default background colors of columns
 .interaction-modal {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .rules-list li::before {
@@ -75,8 +75,8 @@ html {
 }
 
 .getting-started .navigation-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
@@ -88,7 +88,7 @@ html {
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .report-dialog-modal .dialog-option .poll__input {
@@ -140,7 +140,6 @@ html {
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
 .simple_form button {
@@ -175,7 +174,7 @@ html {
 .picture-in-picture__footer,
 .reactions-bar__item {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .reactions-bar__item:hover,
@@ -217,7 +216,7 @@ html {
 
 .column-header__collapsible-inner {
   background: darken($ui-base-color, 4%);
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-bottom: 0;
 }
 
@@ -259,7 +258,7 @@ html {
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &:focus {
     border-color: lighten($ui-base-color, 12%);
@@ -298,7 +297,7 @@ html {
 .directory__tag > a,
 .directory__tag > div {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-left: 0;
@@ -307,18 +306,6 @@ html {
   }
 }
 
-.simple_form {
-  input[type='text'],
-  input[type='number'],
-  input[type='email'],
-  input[type='password'],
-  textarea {
-    &:hover {
-      border-color: lighten($ui-base-color, 12%);
-    }
-  }
-}
-
 .picture-in-picture-placeholder {
   background: $white;
   border-color: lighten($ui-base-color, 8%);
@@ -346,7 +333,7 @@ html {
 }
 
 .activity-stream {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &--under-tabs {
     border-top: 0;
@@ -411,6 +398,22 @@ html {
     color: $ui-highlight-color;
     background-color: rgba($ui-highlight-color, 0.1);
   }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='datetime-local'],
+  textarea {
+    background: darken($ui-base-color, 10%);
+  }
+
+  select {
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat right 8px center / auto 14px;
+  }
 }
 
 .compose-form .compose-form__warning {
@@ -449,8 +452,24 @@ html {
   box-shadow: none;
 }
 
+.card {
+  &__img {
+    background: darken($ui-base-color, 10%);
+  }
+
+  & > a {
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
 .mute-modal select {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   background: $simple-background-color
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
@@ -491,6 +510,7 @@ html {
 .search__popout,
 .emoji-mart-search input,
 .language-dropdown__dropdown .emoji-mart-search input,
+// .strike-card,
 .poll__option input[type='text'] {
   background: darken($ui-base-color, 10%);
 }
@@ -507,3 +527,43 @@ html {
 .inline-follow-suggestions__body__scroll-button__icon {
   color: $white;
 }
+
+a.sparkline {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.dashboard__counters {
+  & > div {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.directory {
+  &__tag {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.strike-entry {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 80d6c13cef..e63601fa9f 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -10,7 +10,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
   }
@@ -18,7 +18,9 @@
   &__img {
     height: 130px;
     position: relative;
-    background: darken($ui-base-color, 12%);
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-bottom: none;
 
     img {
       display: block;
@@ -39,7 +41,9 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: lighten($ui-base-color, 4%);
+    background: var(--background-color);
+    border: 1px solid var(--background-border-color);
+    border-top: none;
 
     .avatar {
       flex: 0 0 auto;
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 06a3b52021..7420a6fc59 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 $no-columns-breakpoint: 600px;
-$sidebar-width: 240px;
+$sidebar-width: 300px;
 $content-width: 840px;
 
 .admin-wrapper {
@@ -26,7 +26,7 @@ $content-width: 840px;
     &__inner {
       display: flex;
       justify-content: flex-end;
-      background: $ui-base-color;
+      background: var(--background-color);
       height: 100%;
     }
   }
@@ -38,7 +38,7 @@ $content-width: 840px;
 
     &__toggle {
       display: none;
-      background: darken($ui-base-color, 4%);
+      background: var(--background-color);
       border-bottom: 1px solid lighten($ui-base-color, 4%);
       align-items: center;
 
@@ -103,7 +103,6 @@ $content-width: 840px;
 
     ul {
       list-style: none;
-      border-radius: 4px 0 0 4px;
       overflow: hidden;
       margin-bottom: 20px;
 
@@ -112,13 +111,13 @@ $content-width: 840px;
       }
 
       a {
+        font-size: 14px;
         display: block;
         padding: 15px;
         color: $darker-text-color;
         text-decoration: none;
         transition: all 200ms linear;
         transition-property: color, background-color;
-        border-radius: 4px 0 0 4px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -129,19 +128,13 @@ $content-width: 840px;
 
         &:hover {
           color: $primary-text-color;
-          background-color: darken($ui-base-color, 5%);
           transition: all 100ms linear;
           transition-property: color, background-color;
         }
-
-        &.selected {
-          border-radius: 4px 0 0;
-        }
       }
 
       ul {
-        background: darken($ui-base-color, 4%);
-        border-radius: 0 0 0 4px;
+        background: var(--background-color);
         margin: 0;
 
         a {
@@ -156,16 +149,10 @@ $content-width: 840px;
       }
 
       .simple-navigation-active-leaf a {
-        color: $primary-text-color;
-        background-color: $ui-highlight-color;
+        color: $highlight-text-color;
         border-bottom: 0;
-        border-radius: 0;
       }
     }
-
-    & > ul > .simple-navigation-active-leaf a {
-      border-radius: 4px 0 0 4px;
-    }
   }
 
   .content-wrapper {
@@ -299,7 +286,7 @@ $content-width: 840px;
       color: $darker-text-color;
       padding-bottom: 8px;
       margin-bottom: 8px;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
     }
 
     h6 {
@@ -372,7 +359,7 @@ $content-width: 840px;
       width: 100%;
       height: 0;
       border: 0;
-      border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
+      border-bottom: 1px solid var(--background-border-color);
       margin: 20px 0;
 
       &.spacer {
@@ -410,14 +397,14 @@ $content-width: 840px;
           inset-inline-start: 0;
           bottom: 0;
           overflow-y: auto;
-          background: $ui-base-color;
+          background: var(--background-color);
         }
       }
 
       ul a,
       ul ul a {
+        font-size: 16px;
         border-radius: 0;
-        border-bottom: 1px solid lighten($ui-base-color, 4%);
         transition: none;
 
         &:hover {
@@ -683,8 +670,10 @@ body,
   line-height: 20px;
   padding: 15px;
   padding-inline-start: 15px * 2 + 40px;
-  background: $ui-base-color;
-  border-bottom: 1px solid darken($ui-base-color, 8%);
+  background: var(--background-color);
+  border-right: 1px solid var(--background-border-color);
+  border-left: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
   position: relative;
   text-decoration: none;
   color: $darker-text-color;
@@ -693,18 +682,13 @@ body,
   &:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
+    border-top: 1px solid var(--background-border-color);
   }
 
   &:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
-    border-bottom: 0;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: lighten($ui-base-color, 4%);
+    border-bottom: 1px solid var(--background-border-color);
   }
 
   &__avatar {
@@ -744,6 +728,47 @@ body,
   }
 }
 
+.strike-entry {
+  display: block;
+  line-height: 20px;
+  padding: 15px;
+  padding-inline-start: 15px * 2 + 40px;
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
+  border-radius: 4px;
+  position: relative;
+  text-decoration: none;
+  color: $darker-text-color;
+  font-size: 14px;
+  margin-bottom: 15px;
+
+  &__avatar {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 15px;
+
+    .avatar {
+      border-radius: 4px;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__title {
+    word-wrap: break-word;
+  }
+
+  &__timestamp {
+    color: $dark-text-color;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: $ui-base-color;
+  }
+}
+
 a.name-tag,
 .name-tag,
 a.inline-name-tag,
@@ -751,6 +776,10 @@ a.inline-name-tag,
   text-decoration: none;
   color: $secondary-text-color;
 
+  &:hover {
+    color: $highlight-text-color;
+  }
+
   .username {
     font-weight: 500;
   }
@@ -830,7 +859,8 @@ a.name-tag,
 }
 
 .report-card {
-  background: $ui-base-color;
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   margin-bottom: 20px;
 
@@ -842,7 +872,6 @@ a.name-tag,
 
     .account {
       padding: 0;
-      border: 0;
 
       &__avatar-wrapper {
         margin-inline-start: 0;
@@ -863,7 +892,7 @@ a.name-tag,
         &:focus,
         &:hover,
         &:active {
-          color: lighten($darker-text-color, 8%);
+          color: $highlight-text-color;
         }
       }
 
@@ -877,11 +906,7 @@ a.name-tag,
     &__item {
       display: flex;
       justify-content: flex-start;
-      border-top: 1px solid darken($ui-base-color, 4%);
-
-      &:hover {
-        background: lighten($ui-base-color, 2%);
-      }
+      border-top: 1px solid var(--background-border-color);
 
       &__reported-by,
       &__assigned {
@@ -904,7 +929,6 @@ a.name-tag,
         max-width: calc(100% - 300px);
 
         &__icon {
-          color: $dark-text-color;
           margin-inline-end: 4px;
           font-weight: 500;
         }
@@ -917,6 +941,10 @@ a.name-tag,
         padding: 15px;
         text-decoration: none;
         color: $darker-text-color;
+
+        &:hover {
+          color: $highlight-text-color;
+        }
       }
     }
   }
@@ -952,14 +980,15 @@ a.name-tag,
 
   .account__header__fields,
   .account__header__content {
-    background: lighten($ui-base-color, 8%);
+    background: var(--background-color);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     height: 100%;
   }
 
   .account__header__fields {
     margin: 0;
-    border: 0;
+    border: 1px solid var(--background-border-color);
 
     a {
       color: $highlight-text-color;
@@ -988,8 +1017,8 @@ a.name-tag,
 .applications-list__item,
 .filters-list__item {
   padding: 15px 0;
-  background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 4%);
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   margin-top: 15px;
 }
@@ -1000,13 +1029,13 @@ a.name-tag,
 
 .announcements-list,
 .filters-list {
-  border: 1px solid lighten($ui-base-color, 4%);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
+  border-bottom: none;
 
   &__item {
     padding: 15px 0;
-    background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid var(--background-border-color);
 
     &__title {
       padding: 0 15px;
@@ -1018,6 +1047,10 @@ a.name-tag,
       text-decoration: none;
       margin-bottom: 10px;
 
+      &:hover {
+        color: $highlight-text-color;
+      }
+
       .account-role {
         vertical-align: middle;
       }
@@ -1056,10 +1089,6 @@ a.name-tag,
     &__permissions {
       margin-top: 10px;
     }
-
-    &:last-child {
-      border-bottom: 0;
-    }
   }
 }
 
@@ -1109,7 +1138,7 @@ a.name-tag,
 
   &__table {
     &__number {
-      color: $secondary-text-color;
+      color: var(--background-color);
       padding: 10px;
     }
 
@@ -1136,7 +1165,7 @@ a.name-tag,
 
     &__box {
       box-sizing: border-box;
-      background: $ui-highlight-color;
+      background: var(--background-color);
       padding: 10px;
       font-weight: 500;
       color: $primary-text-color;
@@ -1158,8 +1187,9 @@ a.name-tag,
 .sparkline {
   display: block;
   text-decoration: none;
-  background: lighten($ui-base-color, 4%);
+  background: var(--background-color);
   border-radius: 4px;
+  border: 1px solid var(--background-border-color);
   padding: 0;
   position: relative;
   padding-bottom: 55px + 20px;
@@ -1231,12 +1261,12 @@ a.sparkline {
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 6%);
+    background: $ui-base-color;
   }
 }
 
 .skeleton {
-  background-color: lighten($ui-base-color, 8%);
+  background-color: var(--background-color);
   background-image: linear-gradient(
     90deg,
     lighten($ui-base-color, 8%),
@@ -1316,17 +1346,13 @@ a.sparkline {
 
 .report-reason-selector {
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--background-color);
   margin-bottom: 20px;
 
   &__category {
     cursor: pointer;
     border-bottom: 1px solid darken($ui-base-color, 8%);
 
-    &:last-child {
-      border-bottom: 0;
-    }
-
     &__label {
       padding: 15px;
       display: flex;
@@ -1355,7 +1381,7 @@ a.sparkline {
 
   &__details {
     &__item {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
       padding: 15px 0;
 
       &:last-child {
@@ -1386,7 +1412,7 @@ a.sparkline {
 
 .account-card {
   border-radius: 4px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   position: relative;
 
   &__warning-badge {
@@ -1474,7 +1500,6 @@ a.sparkline {
       position: absolute;
       bottom: 0;
       inset-inline-end: 15px;
-      background: linear-gradient(to left, $ui-base-color, transparent);
       pointer-events: none;
     }
 
@@ -1550,11 +1575,11 @@ a.sparkline {
   margin-bottom: 20px;
 
   &__item {
-    background: $ui-base-color;
+    background: var(--background-color);
     position: relative;
     padding: 15px;
     padding-inline-start: 15px * 2 + 40px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
 
     &:first-child {
       border-top-left-radius: 4px;
@@ -1564,11 +1589,6 @@ a.sparkline {
     &:last-child {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-      border-bottom: 0;
-    }
-
-    &:hover {
-      background-color: lighten($ui-base-color, 4%);
     }
 
     &__avatar {
@@ -1646,13 +1666,10 @@ a.sparkline {
 }
 
 .report-actions {
-  border: 1px solid darken($ui-base-color, 8%);
-
   &__item {
     display: flex;
     align-items: center;
     line-height: 18px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
 
     &:last-child {
       border-bottom: 0;
@@ -1715,8 +1732,6 @@ a.sparkline {
 
 .strike-card {
   padding: 15px;
-  border-radius: 4px;
-  background: $ui-base-color;
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
@@ -1724,6 +1739,8 @@ a.sparkline {
   color: $primary-text-color;
   box-sizing: border-box;
   min-height: 100%;
+  border: 1px solid var(--background-border-color);
+  border-radius: 4px;
 
   a {
     color: $highlight-text-color;
@@ -1764,15 +1781,14 @@ a.sparkline {
 
   &__statuses-list {
     border-radius: 4px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     font-size: 13px;
     line-height: 18px;
     overflow: hidden;
 
     &__item {
       padding: 16px;
-      background: lighten($ui-base-color, 2%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
 
       &:last-child {
         border-bottom: 0;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 2e7d5e5e9c..456e042c53 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -122,7 +122,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
     padding: 0;
   }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 18a775fb2f..58c9b53a2c 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -521,7 +521,7 @@ body > [data-popper-placement] {
     gap: 16px;
     flex: 0 1 auto;
     border-radius: 4px;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     transition: border-color 300ms linear;
     min-height: 0;
     position: relative;
@@ -587,7 +587,7 @@ body > [data-popper-placement] {
 
     .autosuggest-input {
       flex: 1 1 auto;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
     }
   }
 
@@ -1452,7 +1452,7 @@ body > [data-popper-placement] {
   }
 
   &--first-in-thread {
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid var(--background-border-color);
   }
 
   &__line {
@@ -1794,7 +1794,6 @@ body > [data-popper-placement] {
 
 .account {
   padding: 16px;
-  border-bottom: 1px solid var(--background-border-color);
 
   .account__display-name {
     flex: 1 1 auto;
@@ -3325,7 +3324,7 @@ $ui-header-logo-wordmark-width: 99px;
 .copy-paste-text {
   background: lighten($ui-base-color, 4%);
   border-radius: 8px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   padding: 16px;
   color: $primary-text-color;
   font-size: 15px;
@@ -4728,7 +4727,7 @@ a.status-card {
 
   section {
     padding: 16px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
 
     &:last-child {
       border-bottom: 0;
@@ -5316,7 +5315,7 @@ a.status-card {
       input {
         padding: 8px 12px;
         background: $ui-base-color;
-        border: 1px solid lighten($ui-base-color, 8%);
+        border: 1px solid var(--background-border-color);
         color: $darker-text-color;
 
         @media screen and (width <= 600px) {
@@ -5402,7 +5401,7 @@ a.status-card {
     margin-top: -2px;
     width: 100%;
     background: $ui-base-color;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
     z-index: 99;
@@ -8789,13 +8788,13 @@ noscript {
   }
 
   .search__input {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     padding: 10px;
     padding-inline-end: 30px;
   }
 
   .search__popout {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
   }
 
   .search .icon {
@@ -9114,7 +9113,7 @@ noscript {
     &__input {
       @include search-input;
 
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
       padding: 4px 6px;
       color: $primary-text-color;
       font-size: 16px;
@@ -9149,7 +9148,7 @@ noscript {
       margin-top: -1px;
       padding-top: 5px;
       padding-bottom: 5px;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
     }
 
     &.focused &__input {
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 8a472d75b1..9363e428b3 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -63,7 +63,7 @@
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (width <= 440px) {
     width: 100%;
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index 36a7f44253..12d0a6b92f 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -13,8 +13,9 @@
     & > div,
     & > a {
       padding: 20px;
-      background: lighten($ui-base-color, 4%);
+      background: var(--background-color);
       border-radius: 4px;
+      border: 1px solid var(--background-border-color);
       box-sizing: border-box;
       height: 100%;
     }
@@ -27,7 +28,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index b9fdaa5847..3652ad4abb 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -105,7 +105,7 @@
     width: 100%;
     background: $ui-base-color;
     color: $darker-text-color;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
 
     &::-moz-focus-inner {
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 26bb2bee14..13a731f7f6 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -414,7 +414,7 @@ code {
   }
 
   .input.static .label_input__wrapper {
-    font-size: 16px;
+    font-size: 14px;
     padding: 10px;
     border: 1px solid $dark-text-color;
     border-radius: 4px;
@@ -436,13 +436,14 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%);
-    border: 1px solid darken($ui-base-color, 10%);
-    border-radius: 8px;
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-radius: 4px;
     padding: 10px 16px;
 
     &::placeholder {
-      color: lighten($darker-text-color, 4%);
+      color: $dark-text-color;
+      opacity: 1;
     }
 
     &:invalid {
@@ -453,11 +454,6 @@ code {
       border-color: $valid-value-color;
     }
 
-    &:active,
-    &:focus {
-      border-color: $highlight-text-color;
-    }
-
     @media screen and (width <= 600px) {
       font-size: 16px;
     }
@@ -576,21 +572,25 @@ code {
   select {
     appearance: none;
     box-sizing: border-box;
-    font-size: 16px;
+    font-size: 14px;
     color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%)
+    background: $ui-base-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
-      no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($ui-base-color, 14%);
+      no-repeat right 8px center / auto 14px;
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
     height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
   }
 
   h4 {
@@ -644,8 +644,9 @@ code {
 }
 
 .flash-message {
-  background: lighten($ui-base-color, 8%);
-  color: $darker-text-color;
+  background: var(--background-color);
+  color: $highlight-text-color;
+  border: 1px solid $highlight-text-color;
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
@@ -1335,7 +1336,7 @@ code {
 
     &__toggle > div {
       display: flex;
-      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      border-inline-start: 1px solid var(--background-border-color);
       padding-inline-start: 16px;
     }
   }
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index b5c4836bcd..8d3efcb572 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -46,7 +46,7 @@ body.rtl {
   }
 
   .simple_form select {
-    background: darken($ui-base-color, 10%)
+    background: $ui-base-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
       no-repeat left 8px center / auto 16px;
   }
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index dd5b483ec4..eab7937150 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -9,9 +9,9 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-top: 1px solid $ui-base-color;
+    border-bottom: 1px solid var(--background-border-color);
     text-align: start;
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
 
     &.critical {
       font-weight: 700;
@@ -21,8 +21,6 @@
 
   & > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid $ui-base-color;
-    border-top: 0;
     font-weight: 500;
   }
 
@@ -32,15 +30,20 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: $ui-base-color;
+    background: var(--background-color);
+  }
+
+  & > tbody > tr:last-child > td,
+  & > tbody > tr:last-child > th {
+    border-bottom: 0;
   }
 
   a {
-    color: $highlight-text-color;
-    text-decoration: underline;
+    color: $darker-text-color;
+    text-decoration: none;
 
     &:hover {
-      text-decoration: none;
+      color: $highlight-text-color;
     }
   }
 
@@ -78,7 +81,7 @@
     & > tbody > tr > td {
       padding: 11px 10px;
       background: transparent;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
       color: $secondary-text-color;
     }
 
@@ -90,18 +93,18 @@
 
   &.batch-table {
     & > thead > tr > th {
-      background: $ui-base-color;
-      border-top: 1px solid darken($ui-base-color, 8%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      background: var(--background-color);
+      border-top: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--background-border-color);
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-inline-start: 1px solid darken($ui-base-color, 8%);
+        border-inline-start: 1px solid var(--background-border-color);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid darken($ui-base-color, 8%);
+        border-inline-end: 1px solid var(--background-border-color);
       }
     }
   }
@@ -136,7 +139,7 @@ a.table-action-link {
   font-weight: 500;
 
   &:hover {
-    color: $primary-text-color;
+    color: $highlight-text-color;
   }
 
   i.fa {
@@ -186,9 +189,9 @@ a.table-action-link {
     position: sticky;
     top: 0;
     z-index: 1;
-    border: 1px solid darken($ui-base-color, 8%);
-    background: $ui-base-color;
-    border-radius: 4px 0 0;
+    border: 1px solid var(--background-border-color);
+    background: var(--background-color);
+    border-radius: 4px 4px 0 0;
     height: 47px;
     align-items: center;
 
@@ -199,11 +202,11 @@ a.table-action-link {
   }
 
   &__select-all {
-    background: $ui-base-color;
+    background: var(--background-color);
     height: 47px;
     align-items: center;
     justify-content: center;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
     color: $secondary-text-color;
     display: none;
@@ -249,9 +252,9 @@ a.table-action-link {
 
   &__form {
     padding: 16px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: $ui-base-color;
+    background: var(--background-color);
 
     .fields-row {
       padding-top: 0;
@@ -260,26 +263,18 @@ a.table-action-link {
   }
 
   &__row {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       .optional &:first-child {
-        border-top: 1px solid darken($ui-base-color, 8%);
+        border-top: 1px solid var(--background-border-color);
       }
     }
 
-    &:hover {
-      background: darken($ui-base-color, 2%);
-    }
-
     &:nth-child(even) {
-      background: $ui-base-color;
-
-      &:hover {
-        background: lighten($ui-base-color, 2%);
-      }
+      background: var(--background-color);
     }
 
     &__content {
@@ -357,12 +352,13 @@ a.table-action-link {
   }
 
   .nothing-here {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
     box-shadow: none;
+    background: var(--background-color);
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid darken($ui-base-color, 8%);
+      border-top: 1px solid var(--background-border-color);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 1f69f0cf01..0d56bd9c48 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -204,7 +204,7 @@
 }
 
 .directory {
-  background: $ui-base-color;
+  background: var(--background-color);
   border-radius: 4px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
@@ -217,7 +217,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: $ui-base-color;
+      border: 1px solid lighten($ui-base-color, 8%);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
@@ -229,7 +229,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
 
@@ -351,7 +351,7 @@
       &:focus,
       &:hover,
       &:active {
-        text-decoration: underline;
+        color: $highlight-text-color;
       }
     }
   }
diff --git a/app/views/admin/roles/index.html.haml b/app/views/admin/roles/index.html.haml
index 4f6c511b4f..90a647cc8a 100644
--- a/app/views/admin/roles/index.html.haml
+++ b/app/views/admin/roles/index.html.haml
@@ -8,10 +8,10 @@
 
 %hr.spacer/
 
-.applications-list
+.announcements-list
   = render partial: 'role', collection: @roles.select(&:everyone?)
 
 %hr.spacer/
 
-.applications-list
+.announcements-list
   = render partial: 'role', collection: @roles.reject(&:everyone?)
diff --git a/app/views/auth/registrations/_account_warning.html.haml b/app/views/auth/registrations/_account_warning.html.haml
index 19e5746ff6..c51179b49d 100644
--- a/app/views/auth/registrations/_account_warning.html.haml
+++ b/app/views/auth/registrations/_account_warning.html.haml
@@ -1,14 +1,14 @@
-= link_to disputes_strike_path(account_warning), class: 'log-entry' do
-  .log-entry__header
-    .log-entry__avatar
+= link_to disputes_strike_path(account_warning), class: 'strike-entry' do
+  .strike-entry__header
+    .strike-entry__avatar
       .indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' }
         = fa_icon 'warning'
-    .log-entry__content
-      .log-entry__title
+    .strike-entry__content
+      .strike-entry__title
         = t 'disputes.strikes.title',
             action: t(account_warning.action, scope: 'disputes.strikes.title_actions'),
             date: l(account_warning.created_at.to_date)
-      .log-entry__timestamp
+      .strike-entry__timestamp
         %time.formatted{ datetime: account_warning.created_at.iso8601 }= l(account_warning.created_at)
 
         - if account_warning.overruled?