feat: changes to variants and styling

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

@@ -6,6 +6,13 @@
   padding: var(--Spacing-x1);
 }
 
+.accordionItem.light {
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+.accordionItem.subtle {
+  background-color: var(--Base-Background-Normal);
+}
+
 .summary {
   position: relative;
   display: flex;
@@ -19,16 +26,22 @@
   transition: background-color 0.3s;
 }
 .summary:hover,
-.summary:focus {
+.accordionItem details[open] .summary {
-  background-color: var(--Base-Surface-Primary-light-Hover);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6);
 }
+.accordionItem.light .summary:hover,
+.accordionItem.light details[open] .summary {
+  background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4);
+}
+.accordionItem.subtle .summary:hover,
+.accordionItem.subtle details[open] .summary {
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+
 .accordionItem.card .summary {
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   border-radius: var(--Corner-radius-Medium);
 }
-.accordionItem.faq .summary {
-  padding: var(--Spacing-x2) 0;
-}
 
 .title {
   flex-grow: 1;
@@ -40,9 +53,6 @@
   max-height: 0;
   transition: max-height 0.3s;
 }
-.accordionItem.faq .content {
-  padding: 0;
-}
 
 .chevron {
   transition: transform 0.3s;

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -14,6 +14,7 @@ export default function AccordionItem({
   children,
   icon,
   title,
+  theme,
   variant,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
@@ -42,7 +43,7 @@ export default function AccordionItem({
   }
 
   return (
-    <li className={accordionItemVariants({ variant })}>
+    <li className={accordionItemVariants({ variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}

components/TempDesignSystem/Accordion/AccordionItem/variants.ts

@@ -6,10 +6,15 @@ export const accordionItemVariants = cva(styles.accordionItem, {
   variants: {
     variant: {
       card: styles.card,
-      faq: styles.faq,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
     },
   },
   defaultVariants: {
-    variant: "faq",
+    variant: "card",
+    theme: "default",
   },
 })

components/TempDesignSystem/Accordion/accordion.module.css

@@ -4,10 +4,11 @@
 
 .accordion.card {
   border-radius: var(--Corner-radius-Medium);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  background-color: white;
 }
 
-.accordion.faq {
+.accordion.light {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+.accordion.subtle {
+  background-color: var(--Base-Background-Normal);
 }

components/TempDesignSystem/Accordion/index.tsx

@@ -7,13 +7,14 @@ import { accordionVariants } from "./variants"
 export default function Accordion({
   children,
   className,
+  theme,
   variant,
 }: AccordionProps) {
   return (
-    <ul className={accordionVariants({ className, variant })}>
+    <ul className={accordionVariants({ className, variant, theme })}>
       {Children.map(children, (child) => {
         if (isValidElement<AccordionItemProps>(child)) {
-          return cloneElement(child, { variant })
+          return cloneElement(child, { variant, theme })
         } else {
           return child
         }

components/TempDesignSystem/Accordion/variants.ts

@@ -6,10 +6,15 @@ export const accordionVariants = cva(styles.accordion, {
   variants: {
     variant: {
       card: styles.card,
-      faq: styles.faq,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
     },
   },
   defaultVariants: {
-    variant: "faq",
+    variant: "card",
+    theme: "default",
   },
 })