Merge branch 'psi-dark-mode-issue-fixes' into 'master'

Minor UI fixes for Issue page in dark mode

Closes #223729, #223143, and #223721

See merge request gitlab-org/gitlab!35395

app/assets/stylesheets/components/design_management/design.scss

@@ -151,6 +151,7 @@
 
 .design-dropzone-card {
   transition: border $general-hover-transition-duration $general-hover-transition-curve;
+  color: $gl-text-color;
 
   &:focus,
   &:active {

app/assets/stylesheets/framework/forms.scss

@@ -4,6 +4,8 @@ textarea {
 
 input {
   border-radius: $border-radius-base;
+  color: $gl-text-color;
+  background-color: $input-bg;
 }
 
 input[type='text'].danger {

app/assets/stylesheets/framework/timeline.scss

@@ -27,7 +27,13 @@
 
 .timeline-entry {
   color: $gl-text-color;
-  background-color: $white;
+
+  // [dark-theme]: only give background color to actual notes
+  // in the timeline, the note form textarea has a background
+  // of it's own
+  &:not(.note-form) {
+    background-color: $white;
+  }
 
   .timeline-entry-inner {
     position: relative;

app/assets/stylesheets/framework/variables.scss

@@ -479,9 +479,9 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 $added: #63c363;
 $deleted: #f77;
 $line-added: #ecfdf0;
-$line-added-dark: #c7f0d2;
+$line-added-dark: #c7f0d2 !default;
 $line-removed: #fbe9eb;
-$line-removed-dark: #fac5cd;
+$line-removed-dark: #fac5cd !default;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;

app/assets/stylesheets/framework/variables_overrides.scss

@@ -14,7 +14,7 @@ $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
 $table-border-color: $gray-200;
 $card-border-color: $border-color;
-$card-cap-bg: $gray-light;
+$card-cap-bg: $gray-light !default;
 $success: $green-500;
 $info: $blue-500;
 $warning: $orange-500;

app/assets/stylesheets/pages/note_form.scss

@@ -62,7 +62,8 @@
     background-color: $white;
 
     &.is-focused {
-      @extend .form-control:focus;
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-box-shadow;
 
       .comment-toolbar,
       .nav-links {

app/assets/stylesheets/themes/_dark.scss

@@ -103,6 +103,8 @@ $input-focus-bg: $gray-100;
 $input-color: $gray-900;
 $input-group-addon-bg: $gray-900;
 
+$card-cap-bg: $gray-50;
+
 $tooltip-bg: $gray-800;
 $tooltip-color: $gray-10;
 
@@ -118,6 +120,11 @@ $issues-today-border: #333a40;
 $yiq-text-dark: $gray-50;
 $yiq-text-light: $gray-950;
 
+// Commit Diff Colors
+$line-added-dark: $green-200;
+$line-removed-dark: $red-200;
+
+// Misc component overrides that should live elsewhere
 .gl-label {
   filter: brightness(0.9) contrast(1.1);
 }

changelogs/unreleased/psi-dark-mode-issue-fixes.yml

+---
+title: Minor UI fixes for Issue page in dark mode
+merge_request: 35395
+author:
+type: fixed