redesign feature carousel

src/renderer/features/shared/components/library-background-overlay.module.css

@@ -6,7 +6,28 @@
     pointer-events: none;
     user-select: none;
     background-image: var(--theme-overlay-subheader);
-    opacity: 0.7;
+}
+
+.background-overlay {
+    --color-from: var(--background-base-min-contrast);
+    --color-to: transparent;
+    --dither: none;
+    --direction-and-possibly-color-interpolation: to bottom;
+
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    min-height: 200px;
+    pointer-events: none;
+    user-select: none;
+    background-color: var(--color-from);
+    background-image:
+        linear-gradient(
+            var(--direction-and-possibly-color-interpolation),
+            var(--color-from),
+            var(--color-to)
+        ),
+        var(--dither);
 }
 
 .background-image {

src/renderer/features/shared/components/library-background-overlay.tsx

@@ -1,28 +1,71 @@
+import { generateColors } from '@mantine/colors-generator';
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import styles from './library-background-overlay.module.css';
 
+import { useAppThemeColors } from '/@/renderer/themes/use-app-theme';
+
 interface LibraryBackgroundOverlayProps {
     backgroundColor?: string;
     headerRef: React.RefObject<HTMLDivElement | null>;
+    opacity?: number;
 }
 
 export const LibraryBackgroundOverlay = ({
     backgroundColor,
     headerRef,
+    opacity = 0.7,
 }: LibraryBackgroundOverlayProps) => {
     const height = useHeaderHeight(headerRef);
+
     return (
         <div
             className={styles.overlay}
             style={{
                 backgroundColor,
                 height: height ? `${height + 64}px` : undefined,
+                opacity,
             }}
         />
     );
 };
 
+interface BackgroundOverlayProps {
+    backgroundColor?: string;
+    direction?: string;
+    height?: number | string;
+    opacity?: number;
+}
+
+export const BackgroundOverlay = ({
+    backgroundColor,
+    direction = 'to bottom',
+    height = '100%',
+    opacity,
+}: BackgroundOverlayProps) => {
+    const theme = useAppThemeColors();
+
+    const colors = generateColors(backgroundColor || theme.color['--theme-colors-background']);
+
+    return (
+        <div
+            className={clsx(styles.backgroundOverlay)}
+            style={
+                {
+                    '--color-from': colors[6],
+                    '--color-to': colors[9],
+                    '--direction-and-possibly-color-interpolation': direction,
+                    '--dither': 'none',
+                    backgroundColor: backgroundColor,
+                    height,
+                    opacity,
+                } as React.CSSProperties
+            }
+        />
+    );
+};
+
 interface LibraryBackgroundProps {
     blur?: number;
     headerRef: React.RefObject<HTMLDivElement | null>;