feat(design): update active style for list component (#3356)

Author: xelaint

libs/design/list/src/list-item/list-item.component.ts

@@ -5,6 +5,7 @@ import {
   HostBinding,
   ContentChild,
   ElementRef,
+  Input,
 } from '@angular/core';
 
 import {
@@ -33,6 +34,9 @@ export class DaffListItemComponent {
    */
   @HostBinding('class.daff-list-item') class = true;
 
+  /** Whether or not the header item is active */
+  @Input() @HostBinding('class.active') active = false;
+
   /**
    * @docs-private
    */

libs/design/list/src/list-theme.scss

@@ -27,9 +27,10 @@
 				background-color: $base;
 			}
 
-			&:hover {
+			&:hover,
+			&.active {
 				&:after {
-					background-color: theming.daff-illuminate($base, $neutral, 1);
+					background-color: theming.daff-illuminate($base, $neutral, 2);
 				}
 			}
 		}

libs/design/list/src/list/list.component.scss

@@ -71,7 +71,7 @@
 		}
 
 		&:hover,
-		&:active {
+		&.active {
 			&:after {
 				opacity: 1;
 			}