Only apply bg color to object-contain images

Author: oscarcarlstrom

packages/react/src/carousel/carousel.tsx

@@ -240,7 +240,7 @@ const CarouselItem = ({ className, children }: CarouselItemProps) => {
             {
               fit: 'cover',
               className: cx(
-                'bg-blue-dark',
+                'data-[fit="contain"]:bg-blue-dark',
                 '*:w-full',
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
                 '*:h-70 sm:*:h-[25rem] lg:*:h-[35rem] xl:*:h-[40rem] 2xl:*:h-[42rem] 3xl:*:h-[48rem] 4xl:*:h-[53rem]',

packages/react/src/content/content.tsx

@@ -123,6 +123,9 @@ const Media = ({ ref = null, ...props }: MediaProps) => {
     <div
       ref={ref}
       className={cx(className, _className)}
+      // This can be used (internally) in other components
+      // to apply custom styles to the media element depending on the fit
+      data-fit={fit}
       {...restProps}
       data-slot="media"
     />