Add hovers to cards and walkthrough in home

Author: d13

src/webviews/apps/home/home.css.ts

@@ -310,11 +310,18 @@ export const walkthroughProgressStyles = css`
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
-		padding-block: 4px;
+		padding: 4px 8px 6px;
+		margin-inline: -8px;
 		margin-bottom: 16px;
 		align-items: stretch;
 		cursor: pointer;
+		border-radius: 4px;
 	}
+	.walkthrough-progress:focus-within,
+	.walkthrough-progress:hover {
+		background-color: var(--gl-walkthrough-hover-background);
+	}
+
 	.walkthrough-progress__title {
 		display: flex;
 		justify-content: space-between;

src/webviews/apps/home/home.scss

@@ -5,12 +5,16 @@
 
 @include utils.dark-theme {
 	--popover-bg: var(--color-background--lighten-15);
+	--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 4%);
 	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
+	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%);
 }
 
 @include utils.light-theme {
 	--popover-bg: var(--color-background--darken-15);
+	--gl-walkthrough-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 2%);
 	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
+	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 6%);
 }
 
 * {

src/webviews/apps/shared/components/card/card.css.ts

@@ -17,6 +17,14 @@ export const cardStyles = css`
 		border-inline-start-color: var(--gl-card-active-border, var(--vscode-gitDecoration-addedResourceForeground));
 	}
 
+	.card:focus-within,
+	.card:hover {
+		background-color: var(
+			--gl-card-hover-background,
+			color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%)
+		);
+	}
+
 	.card__actions {
 		position: absolute;
 		top: 0.4rem;