Merge branch 'psi-darker-mode' into 'master'

Better background contrast in dark mode

See merge request gitlab-org/gitlab!47359

app/assets/stylesheets/framework/blocks.scss

@@ -73,7 +73,7 @@
 
   &.content-component-block {
     padding: 11px 0;
-    background-color: $white;
+    background-color: $body-bg;
   }
 
   .title {

app/assets/stylesheets/framework/diffs.scss

@@ -56,7 +56,7 @@
         left: -11px;
         width: 10px;
         height: calc(100% + 1px);
-        background: $white;
+        background: $body-bg;
         pointer-events: none;
       }
 

app/assets/stylesheets/page_bundles/_pipeline_mixins.scss

@@ -66,7 +66,7 @@
 
 @mixin mini-pipeline-item() {
   border-radius: 100px;
-  background-color: $white;
+  background-color: var(--white, $white);
   border-width: 1px;
   border-style: solid;
   width: $ci-action-icon-size;
@@ -85,22 +85,22 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-preparing,
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
 
   &.ci-status-icon-canceled,
@@ -108,12 +108,12 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
   }
 }
 
@@ -226,7 +226,7 @@
       &:focus {
         outline: none;
         text-decoration: none;
-        background-color: $gray-darker;
+        background-color: var(--gray-100, $gray-50);
       }
     }
   }

app/assets/stylesheets/pages/merge_requests.scss

@@ -53,6 +53,7 @@ $mr-widget-min-height: 69px;
   position: relative;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  background: var(--white, $white);
 
   .gl-skeleton-loader {
     display: block;
@@ -61,7 +62,7 @@ $mr-widget-min-height: 69px;
 
 .mr-widget-extension {
   border-top: 1px solid $border-color;
-  background-color: $gray-light;
+  background-color: $gray-50;
 
   &.clickable:hover {
     background-color: $gray-100;
@@ -87,6 +88,7 @@ $mr-widget-min-height: 69px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   border-top: 0;
+  background: var(--white, $white);
 }
 
 .mr-widget-body,
@@ -543,6 +545,7 @@ $mr-widget-min-height: 69px;
   border-radius: $border-radius-default;
   padding: $gl-padding;
   border: 1px solid $border-color;
+  background: var(--white, $white);
   min-height: $mr-widget-min-height;
 
   @include media-breakpoint-up(md) {
@@ -761,7 +764,7 @@ $mr-widget-min-height: 69px;
 .epic-tabs-holder {
   top: $header-height;
   z-index: 250;
-  background-color: $white;
+  background-color: $body-bg;
   border-bottom: 1px solid $border-color;
 
   .with-system-header & {

app/assets/stylesheets/pages/notes.scss

@@ -350,7 +350,7 @@ $note-form-margin-left: 72px;
             left: $gl-padding-24;
             right: 0;
             bottom: 0;
-            background: linear-gradient(rgba($white, 0.1) -100px, $white 100%);
+            background: linear-gradient(rgba($white, 0.1) -100px, $body-bg 100%);
           }
         }
       }

app/assets/stylesheets/themes/_dark.scss

 $gray-10: #1f1f1f;
-$gray-50: #2e2e2e;
-$gray-100: #4f4f4f;
-$gray-200: #707070;
-$gray-300: #919191;
-$gray-400: #a7a7a7;
-$gray-500: #bababa;
-$gray-600: #ccc;
-$gray-700: #dfdfdf;
-$gray-800: #f2f2f2;
+$gray-50: #303030;
+$gray-100: #404040;
+$gray-200: #525252;
+$gray-300: #5e5e5e;
+$gray-400: #868686;
+$gray-500: #999;
+$gray-600: #bfbfbf;
+$gray-700: #dbdbdb;
+$gray-800: #f0f0f0;
 $gray-900: #fafafa;
 $gray-950: #fff;
 
-$green-50: #072b15;
-$green-100: #0a4020;
-$green-200: #0e5a2d;
-$green-300: #12753a;
-$green-400: #168f48;
-$green-500: #1aaa55;
-$green-600: #37b96d;
-$green-700: #75d09b;
-$green-800: #b3e6c8;
-$green-900: #dcf5e7;
+$green-50: #0a4020;
+$green-100: #0d532a;
+$green-200: #24663b;
+$green-300: #217645;
+$green-400: #108548;
+$green-500: #2da160;
+$green-600: #52b87a;
+$green-700: #91d4a8;
+$green-800: #c3e6cd;
+$green-900: #ecf4ee;
 $green-950: #f1fdf6;
 
-$blue-50: #0a2744;
-$blue-100: #0f3b66;
-$blue-200: #134a81;
-$blue-300: #17599c;
-$blue-400: #1b69b6;
-$blue-500: #1f78d1;
-$blue-600: #418cd8;
-$blue-700: #73afea;
-$blue-800: #b8d6f4;
-$blue-900: #e4f0fb;
-$blue-950: #f6fafe;
-
-$orange-50: #592800;
-$orange-100: #853c00;
-$orange-200: #a35200;
-$orange-300: #c26700;
-$orange-400: #de7e00;
-$orange-500: #fc9403;
-$orange-600: #fca429;
-$orange-700: #fdbc60;
-$orange-800: #fed69f;
-$orange-900: #fff1de;
-$orange-950: #fffaf4;
-
-$red-50: #4b140b;
-$red-100: #711e11;
-$red-200: #8b2615;
-$red-300: #a62d19;
-$red-400: #c0341d;
-$red-500: #db3b21;
-$red-600: #e05842;
-$red-700: #ea8271;
-$red-800: #f2b4a9;
-$red-900: #fbe5e1;
-$red-950: #fef6f5;
+$blue-50: #033464;
+$blue-100: #064787;
+$blue-200: #0b5cad;
+$blue-300: #1068bf;
+$blue-400: #1f75cb;
+$blue-500: #428fdc;
+$blue-600: #63a6e9;
+$blue-700: #9dc7f1;
+$blue-800: #cbe2f9;
+$blue-900: #e9f3fc;
+$blue-950: #f2f9ff;
+
+$orange-50: #5c2900;
+$orange-100: #703800;
+$orange-200: #8f4700;
+$orange-300: #9e5400;
+$orange-400: #ab6100;
+$orange-500: #c17d10;
+$orange-600: #d99530;
+$orange-700: #e9be74;
+$orange-800: #f5d9a8;
+$orange-900: #fdf1dd;
+$orange-950: #fff4e1;
+
+$red-50: #660e00;
+$red-100: #8d1300;
+$red-200: #ae1800;
+$red-300: #c91c00;
+$red-400: #dd2b0e;
+$red-500: #ec5941;
+$red-600: #f57f6c;
+$red-700: #fcb5aa;
+$red-800: #fdd4cd;
+$red-900: #fcf1ef;
+$red-950: #fff4f3;
 
 $indigo-50: #1a1a40;
 $indigo-100: #292961;
@@ -166,14 +166,16 @@ body.gl-dark {
 
   --white: #{$white};
   --black: #{$black};
+
+  --svg-status-bg: #{$white};
 }
 
 $border-white-light: $gray-900;
 $border-white-normal: $gray-900;
 
-$body-bg: $gray-50;
-$input-bg: $gray-100;
-$input-focus-bg: $gray-100;
+$body-bg: $gray-10;
+$input-bg: $white;
+$input-focus-bg: $white;
 $input-color: $gray-900;
 $input-group-addon-bg: $gray-900;
 

changelogs/unreleased/psi-darker-mode.yml

+---
+title: Darker background for dark mode, plus small fixes to MR page
+merge_request: 47359
+author:
+type: changed

ee/app/assets/stylesheets/page_bundles/boards.scss

@@ -22,7 +22,7 @@
 
       &:focus,
       &.active {
-        background-color: $white;
+        background-color: var(--white, $white);
       }
 
       &.active {
@@ -33,10 +33,7 @@
   }
 
   .issue-board-dropdown-content {
-    margin: 0;
     padding: $gl-padding;
-    border-bottom: 0;
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
   }
 }