Merge branch '346975-update-code-highlight-color' into 'master'

Code Highlight - Address a11y contrast issues

See merge request gitlab-org/gitlab!76260

app/assets/stylesheets/highlight/common.scss

@@ -45,12 +45,12 @@
   }
 }
 
-@mixin line-number-hover($color) {
-  background-color: $color;
-  border-color: darken($color, 5%);
+@mixin line-number-hover {
+  background-color: $purple-100;
+  border-color: $purple-200;
 
   a {
-    color: darken($color, 15%);
+    color: $gray-600;
   }
 }
 

app/assets/stylesheets/highlight/themes/dark.scss

@@ -22,7 +22,6 @@ $dark-highlight-bg: #ffe792;
 $dark-highlight-color: $black;
 $dark-pre-hll-bg: #373b41;
 $dark-hll-bg: #373b41;
-$dark-over-bg: #9f9ab5;
 $dark-expanded-bg: #3e3e3e;
 $dark-coverage: #b3e841;
 $dark-no-coverage: #ff4f33;
@@ -93,7 +92,7 @@ $dark-il: #de935f;
   .file-line-num {
     @include line-number-link($dark-line-num-color);
   }
-  
+
   .line-numbers,
   .diff-line-num {
     background-color: $dark-main-bg;
@@ -171,14 +170,14 @@ $dark-il: #de935f;
     .diff-grid-left:hover,
     .diff-grid-right:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($dark-over-bg);
+        @include line-number-hover;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($dark-over-bg);
+        @include line-number-hover;
       }
     }
 

app/assets/stylesheets/highlight/themes/monokai.scss

@@ -15,7 +15,6 @@ $monokai-line-empty-bg: #49483e;
 $monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
 $monokai-diff-border: #808080;
 $monokai-highlight-bg: #ffe792;
-$monokai-over-bg: #9f9ab5;
 $monokai-expanded-bg: #3e3e3e;
 $monokai-coverage: #a6e22e;
 $monokai-no-coverage: #fd971f;
@@ -172,14 +171,14 @@ $monokai-gh: #75715e;
     .diff-grid-left:hover,
     .diff-grid-right:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($monokai-over-bg);
+        @include line-number-hover;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($monokai-over-bg);
+        @include line-number-hover;
       }
     }
 

app/assets/stylesheets/highlight/themes/none.scss

@@ -43,7 +43,6 @@
   }
 
   // Diff line
-  $none-over-bg: #ded7fc;
   $none-expanded-border: #e0e0e0;
   $none-expanded-bg: #e0e0e0;
 
@@ -69,7 +68,7 @@
     .diff-grid-left:hover,
     .diff-grid-right:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($none-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -88,7 +87,7 @@
 
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($none-over-bg);
+        @include line-number-hover;
       }
 
       &.hll:not(.empty-cell) {

app/assets/stylesheets/highlight/themes/solarized-dark.scss

@@ -19,7 +19,6 @@ $solarized-dark-line-color-new: #5a766c;
 $solarized-dark-line-color-old: #7a6c71;
 $solarized-dark-highlight: #094554;
 $solarized-dark-hll-bg: #174652;
-$solarized-dark-over-bg: #9f9ab5;
 $solarized-dark-expanded-bg: #010d10;
 $solarized-dark-coverage: #859900;
 $solarized-dark-no-coverage: #cb4b16;
@@ -151,7 +150,7 @@ $solarized-dark-il: #2aa198;
     .diff-grid-left:hover,
     .diff-grid-right:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($solarized-dark-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -182,7 +181,7 @@ $solarized-dark-il: #2aa198;
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($solarized-dark-over-bg);
+        @include line-number-hover;
       }
     }
 

app/assets/stylesheets/highlight/themes/solarized-light.scss

@@ -20,7 +20,6 @@ $solarized-light-line-color-new: #a1a080;
 $solarized-light-line-color-old: #ad9186;
 $solarized-light-highlight: #eee8d5;
 $solarized-light-hll-bg: #ddd8c5;
-$solarized-light-over-bg: #ded7fc;
 $solarized-light-expanded-border: #d2cdbd;
 $solarized-light-expanded-bg: #ece6d4;
 $solarized-light-coverage: #859900;
@@ -171,7 +170,7 @@ $solarized-light-il: #2aa198;
     .diff-grid-left:hover,
     .diff-grid-right:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover($solarized-light-over-bg);
+        @include line-number-hover;
       }
     }
 
@@ -190,7 +189,7 @@ $solarized-light-il: #2aa198;
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover($solarized-light-over-bg);
+        @include line-number-hover;
       }
     }
 

app/assets/stylesheets/highlight/white_base.scss

@@ -9,7 +9,6 @@ $white-code-color: $gl-text-color;
 $white-highlight: #fafe3d;
 $white-pre-hll-bg: #f8eec7;
 $white-hll-bg: #f8f8f8;
-$white-over-bg: #ded7fc;
 $white-expanded-border: #e0e0e0;
 $white-expanded-bg: #f7f7f7;
 $white-c: #998;
@@ -131,7 +130,7 @@ pre.code,
   .diff-grid-left:hover,
   .diff-grid-right:hover {
     .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
-      @include line-number-hover($white-over-bg);
+      @include line-number-hover;
     }
   }
 
@@ -156,7 +155,7 @@ pre.code,
 
     &.is-over,
     &.hll:not(.empty-cell).is-over {
-      @include line-number-hover($white-over-bg);
+      @include line-number-hover;
     }
 
     &.hll:not(.empty-cell) {