Merge branch '241970-fix-hover-style-in-darkmode' into 'master'

Fix todos hover style in dark mode

Closes #241970

See merge request gitlab-org/gitlab!41122

app/assets/stylesheets/page_bundles/todos.scss

@@ -12,8 +12,8 @@
   flex-direction: row;
 
   &:hover {
-    background-color: $blue-50;
-    border-color: $blue-200;
+    background-color: var(--blue-50, $blue-50);
+    border-color: var(--blue-200, $blue-200);
     cursor: pointer;
   }
 
@@ -22,7 +22,7 @@
     border-bottom: 1px solid transparent;
 
     &:hover {
-      border-color: $blue-200;
+      border-color: var(--blue-200, $blue-200);
     }
   }
 
@@ -46,11 +46,9 @@
   }
 
   &.todo-pending.done-reversible {
-    background-color: $white;
-
     &:hover {
-      border-color: $white-normal;
-      background-color: $gray-light;
+      border-color: var(--border-color, $border-color);
+      background-color: var(--gray-50, $gray-50);
       border-top: 1px solid transparent;
 
       .todo-avatar,
@@ -65,7 +63,7 @@
     }
 
     .btn {
-      background-color: $gray-light;
+      background-color: var(--gray-50, $gray-50);
     }
   }
 }
@@ -105,15 +103,15 @@
   .todo-label,
   .todo-project {
     a {
-      color: $blue-600;
       font-weight: $gl-font-weight-normal;
+      color: var(--blue-600, $blue-600);
     }
   }
 
   .todo-body {
     .badge.badge-pill,
     p {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
 
     .md {
@@ -127,9 +125,9 @@
 
     pre {
       border: 0;
-      background: $gray-light;
+      background: var(--gray-50, $gray-50);
       border-radius: 0;
-      color: $gray-500;
+      color: var(--gray-500, $gray-500);
       margin: 0 20px;
       overflow: hidden;
     }
@@ -185,7 +183,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid $gray-100;
+      border-left: 2px solid var(--border-color, $border-color);
       padding-left: 10px;
     }
   }

app/assets/stylesheets/themes/_dark.scss

@@ -85,6 +85,86 @@ $white-light: #2b2b2b;
 $white-normal: #333;
 $white-dark: #444;
 
+$border-color: #4f4f4f;
+
+body.gl-dark {
+  --gray-10: #{$gray-10};
+  --gray-50: #{$gray-50};
+  --gray-100: #{$gray-100};
+  --gray-200: #{$gray-200};
+  --gray-300: #{$gray-300};
+  --gray-400: #{$gray-400};
+  --gray-500: #{$gray-500};
+  --gray-600: #{$gray-600};
+  --gray-700: #{$gray-700};
+  --gray-800: #{$gray-800};
+  --gray-900: #{$gray-900};
+  --gray-950: #{$gray-950};
+
+  --green-50: #{$green-50};
+  --green-100: #{$green-100};
+  --green-200: #{$green-200};
+  --green-300: #{$green-300};
+  --green-400: #{$green-400};
+  --green-500: #{$green-500};
+  --green-600: #{$green-600};
+  --green-700: #{$green-700};
+  --green-800: #{$green-800};
+  --green-900: #{$green-900};
+  --green-950: #{$green-950};
+
+  --blue-50: #{$blue-50};
+  --blue-100: #{$blue-100};
+  --blue-200: #{$blue-200};
+  --blue-300: #{$blue-300};
+  --blue-400: #{$blue-400};
+  --blue-500: #{$blue-500};
+  --blue-600: #{$blue-600};
+  --blue-700: #{$blue-700};
+  --blue-800: #{$blue-800};
+  --blue-900: #{$blue-900};
+  --blue-950: #{$blue-950};
+
+  --orange-50: #{$orange-50};
+  --orange-100: #{$orange-100};
+  --orange-200: #{$orange-200};
+  --orange-300: #{$orange-300};
+  --orange-400: #{$orange-400};
+  --orange-500: #{$orange-500};
+  --orange-600: #{$orange-600};
+  --orange-700: #{$orange-700};
+  --orange-800: #{$orange-800};
+  --orange-900: #{$orange-900};
+  --orange-950: #{$orange-950};
+
+  --red-50: #{$red-50};
+  --red-100: #{$red-100};
+  --red-200: #{$red-200};
+  --red-300: #{$red-300};
+  --red-400: #{$red-400};
+  --red-500: #{$red-500};
+  --red-600: #{$red-600};
+  --red-700: #{$red-700};
+  --red-800: #{$red-800};
+  --red-900: #{$red-900};
+  --red-950: #{$red-950};
+
+  --indigo-50: #{$indigo-50};
+  --indigo-100: #{$indigo-100};
+  --indigo-200: #{$indigo-200};
+  --indigo-300: #{$indigo-300};
+  --indigo-400: #{$indigo-400};
+  --indigo-500: #{$indigo-500};
+  --indigo-600: #{$indigo-600};
+  --indigo-700: #{$indigo-700};
+  --indigo-800: #{$indigo-800};
+  --indigo-900: #{$indigo-900};
+  --indigo-950: #{$indigo-950};
+
+  --gl-text-color: #{$gray-900};
+  --border-color: #{$border-color};
+}
+
 $border-white-light: $gray-900;
 $border-white-normal: $gray-900;
 

changelogs/unreleased/241970-fix-hover-style-in-darkmode.yml

+---
+title: Fix todos hover style in dark mode
+merge_request: 41122
+author:
+type: fixed