style: Adjust series page & app colors

src/lib/components/Carousel/Carousel.svelte

@@ -45,7 +45,7 @@
 	</div>
 
 	<div class="relative">
-		<Container direction="horizontal" handleNavigateOut={{ left: () => true }}>
+		<Container direction="horizontal" handleNavigateOut={{ left: () => true }} let:focusIndex>
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
@@ -55,7 +55,7 @@
 				tabindex="-1"
 				on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
 			>
-				<slot />
+				<slot {focusIndex} />
 			</div>
 		</Container>
 		{#if scrollX > 50}

src/lib/components/Carousel/UICarousel.svelte

@@ -26,13 +26,17 @@
 
 <Container
 	direction="horizontal"
-	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
+	class={classNames(
+		$$restProps.class,
+		'overflow-x-scroll scrollbar-hide relative p-1 overflow-y-visible'
+	)}
 	style={`mask-image: linear-gradient(to right, transparent 0%, ${
 		fadeLeft ? '' : 'black 0%, '
 	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
 	on:scroll={updateScrollPosition}
 	bind:this={element}
 	handleNavigateOut={{ left: () => true }}
+	let:focusIndex
 >
-	<slot />
+	<slot {focusIndex} />
 </Container>