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

Author: HDinger

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(--list-item-bg-color)
+$ian-bg-hover-color: var(--list-item-bg-hover-color)
+$ian-border-color: var(--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(--list-item-bg-selected-color)
+$ian-bg-selected-hover-color: var(--list-item-bg-selected-hover-color)
+$ian-selected-border-color: var(--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,10 +29,11 @@ $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: $ian-selected-border-color
     &:hover
       background: $ian-bg-selected-hover-color
 

frontend/src/global_styles/content/_tables.sass

@@ -105,13 +105,13 @@ th.hidden
 
 tr.context-menu-selection,
 tr.-checked
-  background-color: var(--bgColor-accent-muted) !important
+  background-color: var(--list-item-bg-selected-color) !important
   &[class*=__hl_background]
     outline: var(--bgColor-accent-emphasis) solid 2px
 
   td
-    border-top: 1px solid var(--bgColor-accent-emphasis) !important
-    border-bottom: 1px solid var(--bgColor-accent-emphasis) !important
+    border-top: 1px solid var(--list-item-selected-border-color) !important
+    border-bottom: 1px solid var(--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,18 @@ 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(--list-item-bg-color) !important
+    border-color: var(--list-item-selected-border-color)
     color: var(--body-font-color) !important
 
+    &:hover
+      background: var(--list-item-bg-color) !important
+    &.-checked
+      background: var(--list-item-bg-selected-color) !important
+      border-color: var(--list-item-selected-border-color)
+      &:hover
+        background: var(--list-item-bg-selected-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,14 @@
   --gantt-split-width: 50%;
   --enterprise-upsell-color: #CE4C00;
   --enterprise-upsell-text-color: #CE4C00;
+
+  --list-item-bg-color: var(--body-background);
+  --list-item-bg-hover-color: var(--bgColor-muted);
+  --list-item-border-color: var(--borderColor-default);
+  --list-item-selected-bg-color: var(--bgColor-accent-muted);
+  --list-item-selected-bg-hover-color: hsl(from var(--bgColor-accent-muted) h calc(s - 60) l);
+  --list-item-selected-border-color: var(--borderColor-accented-emphasis);
+  //--list-item-bg-pressed-color: ??
+  //--list-item-bg-pressed-hover-color: ??
+  //--list-item-bg-pressed-border-color: ??
 }