fix(SW-194): small design updates

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -6,13 +6,6 @@
   padding: var(--Spacing-x1);
 }
 
-.accordionItem.light {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-.accordionItem.subtle {
-  background-color: var(--Base-Background-Primary-Normal);
-}
-
 .summary {
   position: relative;
   display: flex;
@@ -48,7 +41,7 @@
 }
 
 .content {
-  padding: 0 var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.3s;

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -5,17 +5,19 @@ import { useRef } from "react"
 import { ChevronDownIcon } from "@/components/Icons"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
-import { AccordionItemProps } from "./accordionItem"
 import { accordionItemVariants } from "./variants"
 
 import styles from "./accordionItem.module.css"
 
+import type { AccordionItemProps } from "./accordionItem"
+
 export default function AccordionItem({
   children,
   icon,
   title,
   theme,
   variant,
+  className,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -43,7 +45,7 @@ export default function AccordionItem({
   }
 
   return (
-    <li className={accordionItemVariants({ variant, theme })}>
+    <li className={accordionItemVariants({ className, variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}