Fix hover style in dark mode

Our page specific CSS don't have a dark mode variant. Rather than
compiling a page specific CSS file for each theme, we make use of CSS
variables in order to define the correct colors. There is prior art with
the IDE Themes and eventually we can move to _only_ use these variables.

In case one variable is undefined, we will fallback on the light theme
value for it. Thus we just need to define the variables in the dark
theme, since the fallback _is_ the light theme.

This approach will allow us to create other themes, e.g. for
accessibility (color blindness, high contrast) in the future.

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