Add high-contrast styles to common stylesheet (#37523)

app/javascript/styles/contrast.scss

@@ -1,2 +1 @@
 @use 'common';
-@use 'mastodon/high-contrast';

app/javascript/styles/mastodon/components.scss

@@ -39,8 +39,8 @@
     color: var(--color-text-error);
   }
 
-  &:hover,
+  &:not(:disabled):hover,
-  &:active {
+  &:not(:disabled):active {
     text-decoration: underline;
   }
 
@@ -1081,20 +1081,36 @@ body > [data-popper-placement] {
   }
 
   a {
+    --text-decoration-default: none;
+    --text-decoration-hover: underline;
+
+    [data-contrast='high'] & {
+      --text-decoration-default: underline;
+      --text-decoration-hover: none;
+    }
+
     color: var(--color-text-status-links);
-    text-decoration: none;
+    text-decoration: var(--text-decoration-default);
     unicode-bidi: isolate;
 
-    &:hover {
+    &:hover,
-      text-decoration: underline;
+    &:focus,
+    &:active {
+      text-decoration: var(--text-decoration-hover);
     }
 
     &.mention {
-      &:hover {
+      text-decoration: none;
-        text-decoration: none;
 
+      span {
+        text-decoration: var(--text-decoration-default);
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
         span {
-          text-decoration: underline;
+          text-decoration: var(--text-decoration-hover);
         }
       }
     }
@@ -1356,6 +1372,15 @@ body > [data-popper-placement] {
     text-decoration: underline;
   }
 
+  [data-contrast='high'] & {
+    text-decoration: underline;
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
   .icon {
     width: 15px;
     height: 15px;

app/javascript/styles/mastodon/high-contrast.scss

@@ -1,40 +0,0 @@
-.status__content a,
-.reply-indicator__content a,
-.edit-indicator__content a,
-.link-footer a,
-.status__content__read-more-button,
-.status__content__translate-button {
-  text-decoration: underline;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
-
-  &.mention {
-    text-decoration: none;
-
-    span {
-      text-decoration: underline;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      span {
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-.link-button:disabled {
-  cursor: not-allowed;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none !important;
-  }
-}

spec/helpers/theme_helper_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe ThemeHelper do
       it 'returns the theme stylesheet without color scheme information' do
         expect(html_links.first.attributes.symbolize_keys)
           .to include(
-            href: have_attributes(value: match(/contrast/)),
+            href: have_attributes(value: match(/default/)),
             media: have_attributes(value: 'all')
           )
       end