Merge branch '26186-diff-view-plus-and-minus-signs-as-part-of-line-number' into 'master'

Color + and - signs in diffs to increase code legibility

Closes #26186

See merge request !8768

app/assets/stylesheets/highlight/dark.scss

@@ -13,6 +13,8 @@ $dark-main-bg: #1d1f21;
 $dark-main-color: #1d1f21;
 $dark-line-color: #c5c8c6;
 $dark-line-num-color: rgba(255, 255, 255, 0.3);
+$dark-line-num-color-new: #627165;
+$dark-line-num-color-old: #806565;
 $dark-diff-not-empty-bg: #557;
 $dark-highlight-bg: #ffe792;
 $dark-highlight-color: $black;
@@ -89,7 +91,6 @@ $dark-il: #de935f;
 
   .diff-line-num,
   .diff-line-num a {
-    color: $dark-main-color;
     color: $dark-line-num-color;
   }
 
@@ -121,11 +122,21 @@ $dark-il: #de935f;
     .diff-line-num.new,
     .line_content.new {
       @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
+
+      &::before,
+      a {
+        color: $dark-line-num-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
       @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
+
+      &::before,
+      a {
+        color: $dark-line-num-color-old;
+      }
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/monokai.scss

@@ -7,6 +7,8 @@ $monokai-bg: #272822;
 $monokai-border: #555;
 $monokai-text-color: #f8f8f2;
 $monokai-line-num-color: rgba(255, 255, 255, 0.3);
+$monokai-line-num-color-new: #707565;
+$monokai-line-num-color-old: #7e736f;
 $monokai-line-empty-bg: #49483e;
 $monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
 $monokai-diff-border: #808080;
@@ -120,11 +122,21 @@ $monokai-gi: #a6e22e;
     .diff-line-num.new,
     .line_content.new {
       @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
+
+      &::before,
+      a {
+        color: $monokai-line-num-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
       @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
+
+      &::before,
+      a {
+        color: $monokai-line-num-color-old;
+      }
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -13,6 +13,8 @@ $solarized-dark-pre-color: #93a1a1;
 $solarized-dark-pre-border: #113b46;
 $solarized-dark-line-bg: #002b36;
 $solarized-dark-line-color: rgba(255, 255, 255, 0.3);
+$solarized-dark-line-color-new: #5a766c;
+$solarized-dark-line-color-old: #7a6c71;
 $solarized-dark-highlight: #094554;
 $solarized-dark-hll-bg: #174652;
 $solarized-dark-c: #586e75;
@@ -124,11 +126,21 @@ $solarized-dark-il: #2aa198;
     .diff-line-num.new,
     .line_content.new {
       @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
+
+      &::before,
+      a {
+        color: $solarized-dark-line-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
       @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
+
+      &::before,
+      a {
+        color: $solarized-dark-line-color-old;
+      }
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/solarized_light.scss

@@ -13,6 +13,9 @@ $solarized-light-pre-bg: #002b36;
 $solarized-light-pre-bg: #fdf6e3;
 $solarized-light-pre-color: #586e75;
 $solarized-light-line-bg: #fdf6e3;
+$solarized-light-line-color: rgba(0, 0, 0, 0.3);
+$solarized-light-line-color-new: #a1a080;
+$solarized-light-line-color-old: #ad9186;
 $solarized-light-highlight: #eee8d5;
 $solarized-light-hll-bg: #ddd8c5;
 $solarized-light-c: #93a1a1;
@@ -98,7 +101,7 @@ $solarized-light-il: #2aa198;
 
   .diff-line-num,
   .diff-line-num a {
-    color: $black-transparent;
+    color: $solarized-light-line-color;
   }
 
   // Code itself
@@ -130,11 +133,21 @@ $solarized-light-il: #2aa198;
     .line_content.new {
       @include diff_background($solarized-light-new-bg,
       $solarized-light-new-idiff, $solarized-light-border);
+
+      &::before,
+      a {
+        color: $solarized-light-line-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
       @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
+
+      &::before,
+      a {
+        color: $solarized-light-line-color-old;
+      }
     }
 
     .line_content.match {

app/assets/stylesheets/highlight/white.scss

@@ -108,11 +108,19 @@ $white-gc-bg: #eaf2f5;
       &.old {
         background-color: $line-number-old;
         border-color: $line-removed-dark;
+
+        a {
+          color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
+        }
       }
 
       &.new {
         background-color: $line-number-new;
         border-color: $line-added-dark;
+
+        a {
+          color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
+        }
       }
 
       &.hll:not(.empty-cell) {
@@ -125,6 +133,10 @@ $white-gc-bg: #eaf2f5;
       &.old {
         background-color: $line-removed;
 
+        &::before {
+          color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
+        }
+
         span.idiff {
           background-color: $line-removed-dark;
         }
@@ -133,6 +145,10 @@ $white-gc-bg: #eaf2f5;
       &.new {
         background-color: $line-added;
 
+        &::before {
+          color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
+        }
+
         span.idiff {
           background-color: $line-added-dark;
         }

changelogs/unreleased/26186-diff-view-plus-and-minus-signs-as-part-of-line-number.yml

+---
+title: Color + and - signs in diffs to increase code legibility
+merge_request:
+author: