Refines features carousel styling.

Updates carousel styles for better visual consistency, including layout improvements, typography, and theming with VSCode variables. Enhances maintainability and prepares for future feature image integration.

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/media/feature-graph.svg

@@ -15,6 +15,10 @@ export class GlFeatureCarousel extends LitElement {
 	static override styles = [
 		css`
 			:host {
+				--gl-carousel-border-radius: 0;
+				--gl-carousel-background-color: transparent;
+				--gl-carousel-padding: 1rem;
+
 				display: block;
 				width: 100%;
 			}
@@ -36,8 +40,11 @@ export class GlFeatureCarousel extends LitElement {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-			}
 
+				border-radius: var(--gl-carousel-border-radius);
+				background-color: var(--gl-carousel-background-color);
+				padding: var(--gl-carousel-padding);
+			}
 
 			::slotted(*) {
 				display: none;
@@ -117,19 +124,19 @@ export class GlFeatureCard extends LitElement {
 		css`
 			:host {
 				display: flex;
+				gap: 1rem;
 			}
 
 			.image {
-			}
-			.content {
-			}
-			::slotted(img) {
-			}
-
-			::slotted(h1) {
+				width: 50%;
 			}
 
-			::slotted(p) {
+			.content {
+				margin-top: 0.5rem;
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
 			}
 		`,
 	];

src/webviews/apps/welcome/components/feature-carousel.ts

@@ -3,6 +3,9 @@ import { css } from 'lit';
 const colorScheme = css`
 	:host {
 		--accent-color: #cb64ff;
+		--text-color: var(--vscode-descriptionForeground);
+		--em-color: var(--vscode-editor-foreground);
+		--link-color: var(--vscode-textLink-foreground);
 
 		--hero-gradient: radial-gradient(76.32% 76.32% at 50% 7.24%, #7b00ff 29.72%, rgba(255, 0, 242, 0) 100%);
 	}
@@ -12,12 +15,14 @@ const typography = css`
 	:host {
 		--h1-font-size: 1.4rem;
 		--p-font-size: 1rem;
+		--card-font-size: var(--vscode-font-size);
 	}
 
 	@media (max-width: 640px) {
 		:host {
 			--h1-font-size: 0.75rem;
 			--p-font-size: 0.7rem;
+			--card-font-size: var(--vscode-editor-font-size);
 		}
 	}
 `;
@@ -89,13 +94,46 @@ const header = css`
 		margin-bottom: 0;
 
 		font-size: var(--h1-font-size);
+		color: var(--em-text-color);
 	}
 	.header p {
-		color: var(--vscode-descriptionForeground);
+		color: var(--text-color);
+	}
+`;
+
+const carousel = css`
+	gl-feature-carousel {
+		text-align: initial;
+		--gl-carousel-border-radius: 0.65rem;
+		--gl-carousel-background-color: var(--vscode-textBlockQuote-background);
+	}
+
+	gl-feature-carousel h1 {
+		margin: 0;
+		font-size: var(--card-font-size);
+		color: var(--em-color);
+	}
+
+	gl-feature-carousel p {
+		margin: 0.4em 0;
+		font-size: var(--card-font-size);
+		color: var(--text-color);
+	}
+
+	gl-feature-carousel img {
+		max-width: 100%;
+		height: auto;
+		border-radius: 0.4rem;
+	}
+
+	gl-feature-carousel a {
+		color: var(--link-color);
+		text-decoration: none;
 	}
 `;
 
 export const welcomeStyles = css`
 	${colorScheme} ${typography}
 	${heroGradient} ${section} ${header}
+	${carousel}
 `;