feat(admin-ui): add background prop to Accordion component

- Add `background` prop with options: "base", "light", "transparent"
- Set default background to "light" for consistency
- Update nested accordion background logic to respect explicit prop
- Remove hardcoded margin line from AccordionTrigger
- Update documentation and Storybook examples with new prop
- Add background control to Storybook Documentation story

Author: ku5ic

packages/admin-ui/src/Accordion/Accordion.mdx

@@ -19,7 +19,7 @@ import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
 
 const AccordionExample = () => {
     return (
-        <Accordion variant="underline">
+        <Accordion variant="underline" background="base">
             <Accordion.Item
                 title="Accordion Item 1"
                 description="This is a description for the first item"
@@ -80,7 +80,7 @@ import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
 
 const AccordionExample = () => {
     return (
-        <Accordion variant="underline">
+        <Accordion variant="underline" background="base">
             <Accordion.Item
                 title="Accordion Item 1"
                 description="This is a description for the first item"
@@ -458,7 +458,7 @@ import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
 
 const LightBackgroundExample = () => {
     return (
-        <Accordion>
+        <Accordion background="base">
             <Accordion.Item
                 title="Accordion item 1"
                 description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
@@ -491,7 +491,7 @@ import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
 
 const ContainerLightExample = () => {
     return (
-        <Accordion variant="container">
+        <Accordion variant="container" background="base">
             <Accordion.Item
                 title="Accordion item 1"
                 description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."

packages/admin-ui/src/Accordion/Accordion.stories.tsx

@@ -298,6 +298,7 @@ export const LightBackground: Story = {
         )
     ],
     args: {
+        background: "light",
         children: (
             <>
                 <AccordionItem
@@ -326,6 +327,7 @@ export const ContainerVariantWithLightBackground: Story = {
     ],
     args: {
         variant: "container",
+        background: "light",
         children: (
             <>
                 <AccordionItem
@@ -350,6 +352,7 @@ export const Documentation: Story = {
     },
     args: {
         variant: "underline",
+        background: "base",
         children: (
             <>
                 <Accordion.Item
@@ -391,6 +394,11 @@ export const Documentation: Story = {
             options: ["underline", "container"],
             description: "The visual style of the accordion"
         },
+        background: {
+            control: "select",
+            options: ["base", "light", "transparent"],
+            description: "The background color of the accordion"
+        },
         children: {
             description:
                 "The content of the accordion. Please refer to the example code for details."

packages/admin-ui/src/Accordion/Accordion.tsx

@@ -10,10 +10,16 @@ const accordionVariants = cva("wby-group wby-w-full", {
             container:
                 "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col wby-rounded-lg",
             underline: "wby-accordion-variant-underline"
+        },
+        background: {
+            base: "wby-bg-neutral-base",
+            light: "wby-bg-neutral-light",
+            transparent: "wby-bg-transparent"
         }
     },
     defaultVariants: {
-        variant: "container"
+        variant: "container",
+        background: "light"
     }
 });
 
@@ -22,16 +28,30 @@ type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &
         children: React.ReactNode;
     };
 
-const getBackgroundByDepth = (depth: number): string => {
-    return depth % 2 === 0 ? "wby-bg-neutral-base" : "wby-bg-neutral-light";
+const getBackgroundByDepth = (
+    depth: number,
+    background?: string | null
+): "base" | "light" | "transparent" | undefined => {
+    // If background is explicitly provided, use it at any depth
+    if (background !== undefined && background !== null) {
+        return background as "base" | "light" | "transparent";
+    }
+
+    // For depth 0, return undefined to let defaultVariants apply
+    if (depth === 0) {
+        return undefined;
+    }
+
+    // For nested levels, alternate between light and base
+    return depth % 2 === 0 ? "light" : "base";
 };
 
-const AccordionBase = ({ children, variant, className }: AccordionProps) => {
+const AccordionBase = ({ children, variant, background, className }: AccordionProps) => {
     const currentDepth = useDepth() + 1;
-    const background = getBackgroundByDepth(currentDepth);
+    const bg = getBackgroundByDepth(currentDepth, background);
 
     return (
-        <div className={cn(accordionVariants({ variant }), className, background)}>
+        <div className={cn(accordionVariants({ variant, background: bg }), className)}>
             <DepthProvider value={currentDepth}>{children}</DepthProvider>
         </div>
     );

packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx

@@ -76,9 +76,6 @@ const AccordionTrigger = ({
                     cursorClass
                 )}
             >
-                {!icon && !isInteractable && (
-                    <div className={"wby-ml-sm wby-w-[20px] wby-h-[1px] wby-bg-neutral-strong"} />
-                )}
                 {draggable ? <AccordionItemDragHandle /> : null}
                 {isInteractable ? <OpenCloseIndicator /> : null}