Introduce specific variables for list item selection, hover and pressed state

Author: HDinger

app/views/custom_styles/_primer_color_mapping.erb

@@ -61,6 +61,13 @@
     --main-menu-font-color: var(--fgColor-default);
     --main-menu-selected-font-color: var(--fgColor-default);
     --main-menu-bg-color: var(--body-background);
+    --box-list-item-bg-color: var(--body-background);
+    --box-list-item-bg-hover-color: var(--bgColor-muted) !important;
+    --box-list-item-border-color: var(--borderColor-default) !important;
+    --box-list-item-selected-bg-color: hsl(from var(--display-blue-bgColor-muted) h calc(s - 30) calc(l + 2)) !important;
+    --box-list-item-selected-bg-hover-color: var(--display-blue-bgColor-muted) !important;
+    --box-list-item-selected-border-color: var(--borderColor-accent-muted) !important;
+    --box-list-item-pressed-border-color: var(--borderColor-accent-emphasis) !important;
   }
 
   /* For accessibility themes we are also overriding the header and the sidebar */

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass

@@ -1,11 +1,13 @@
 @import "helpers"
 
-$ian-bg-color: var(--body-background)
-$ian-bg-hover-color: var(--bgColor-neutral-muted)
+$ian-bg-color: var(--box-list-item-bg-color)
+$ian-bg-hover-color: var(--box-list-item-bg-hover-color)
+$ian-border-color: var(--box-list-item-border-color)
 $ian-bg-read-color: var(--bgColor-muted)
-$ian-bg-read-hover-color: hsl(from var(--bgColor-neutral-muted) h s calc(l - 0.5))
-$ian-bg-selected-color: var(--codeMirror-selection-bgColor)
-$ian-bg-selected-hover-color: hsl(from var(--codeMirror-selection-bgColor) h calc(s - 30) l)
+$ian-bg-read-hover-color: hsl(from var(--bgColor-muted) h s calc(l - 3.5))
+$ian-bg-selected-color: var(--box-list-item-selected-bg-color)
+$ian-bg-selected-hover-color: var(--box-list-item-selected-bg-hover-color)
+$ian-selected-border-color: var(--box-list-item-selected-border-color)
 // This needs to be set in the itemSize of
 // the virtual scroller
 $ian-height: 100px
@@ -17,7 +19,7 @@ $subject-font-size: 14px
   margin: 0
   padding: 15px 10px
   font-size: 0.9rem
-  border-top: 1px solid var(--borderColor-default)
+  border-top: 1px solid $ian-border-color
   height: $ian-height
 
   &:hover
@@ -27,13 +29,19 @@ $subject-font-size: 14px
     border-top: none
 
   &:last-of-type
-    border-bottom: 1px solid var(--borderColor-default)
+    border-bottom: 1px solid $ian-border-color
 
   &_selected
     background: $ian-bg-selected-color
+    border-color: $ian-selected-border-color
     &:hover
       background: $ian-bg-selected-hover-color
 
+    // Since the ian only have a top border, we need to highlight the next sibling as well to
+    // create the impression that the selected ian has a top and bottom border
+    & + .op-ian-item
+      border-color: $ian-selected-border-color
+
   &_read
     background: $ian-bg-read-color
     &:hover

frontend/src/global_styles/content/_tables.sass

@@ -105,13 +105,16 @@ th.hidden
 
 tr.context-menu-selection,
 tr.-checked
-  background-color: var(--bgColor-accent-muted) !important
+  background-color: var(--box-list-item-selected-bg-color) !important
   &[class*=__hl_background]
     outline: var(--bgColor-accent-emphasis) solid 2px
 
+  &:hover
+    background-color: var(--box-list-item-selected-bg-hover-color) !important
+
   td
-    border-top: 1px solid var(--bgColor-accent-emphasis) !important
-    border-bottom: 1px solid var(--bgColor-accent-emphasis) !important
+    border-top: 1px solid var(--box-list-item-selected-border-color) !important
+    border-bottom: 1px solid var(--box-list-item-selected-border-color) !important
     color: var(--body-font-color) !important
     a
       color: var(--body-font-color) !important

frontend/src/global_styles/layout/work_packages/_table.sass

@@ -71,9 +71,16 @@ body[class*="router--"]
   div.row-hovered
     // Use important to override the background styles from __hl classes
     // That also have to be important (cf. 30863)
-    background: var(--codeMirror-selection-bgColor) !important
+    background: var(--box-list-item-bg-hover-color) !important
+    border-color: var(--box-list-item-border-color)
     color: var(--body-font-color) !important
 
+    &.-checked
+      background: var(--box-list-item-selected-bg-color) !important
+      border-color: var(--box-list-item-selected-border-color)
+      &:hover
+        background: var(--box-list-item-selected-bg-hover-color) !important
+
 // Left part of the split view
 // == flex container for (table|timeline)
 .work-packages-split-view--tabletimeline-side

frontend/src/global_styles/openproject/_variable_defaults.scss

@@ -133,4 +133,12 @@
   --gantt-split-width: 50%;
   --enterprise-upsell-color: #CE4C00;
   --enterprise-upsell-text-color: #CE4C00;
+
+  --box-list-item-bg-color: var(--body-background);
+  --box-list-item-bg-hover-color: #f6f8fa;
+  --box-list-item-border-color: #d1d9e0;
+  --box-list-item-selected-bg-color: hsl(from #d1f0ff h calc(s - 30) calc(l + 2));
+  --box-list-item-selected-bg-hover-color: #d1f0ff;
+  --box-list-item-selected-border-color: #54aeff66;
+  --box-list-item-pressed-border-color: #0969da;
 }