chore: cleanup

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

@@ -2,23 +2,10 @@
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
-.card {
+.accordionItem.card {
   padding: var(--Spacing-x1);
 }
 
-.card .summary {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.faq .summary {
-  padding: var(--Spacing-x2) 0;
-}
-
-.faq .content {
-  padding: 0;
-}
-
 .summary {
   position: relative;
   display: flex;
@@ -31,15 +18,21 @@
   font-weight: var(--typography-Body-Bold-fontWeight);
   transition: background-color 0.3s;
 }
-
-.title {
-  flex-grow: 1;
-}
-
 .summary:hover,
 .summary:focus {
   background-color: var(--Base-Surface-Primary-light-Hover);
 }
+.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;
+}
 
 .content {
   padding: 0 var(--Spacing-x-one-and-half);
@@ -47,11 +40,13 @@
   max-height: 0;
   transition: max-height 0.3s;
 }
+.accordionItem.faq .content {
+  padding: 0;
+}
 
 .chevron {
   transition: transform 0.3s;
 }
-
 details[open] .chevron {
   transform: rotate(180deg);
 }

components/TempDesignSystem/Accordion/AccordionItem/variants.ts

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

components/TempDesignSystem/Accordion/accordion.module.css

@@ -2,11 +2,12 @@
   list-style: none;
 }
 
-.card {
+.accordion.card {
   border-radius: var(--Corner-radius-Medium);
   background-color: var(--Base-Surface-Primary-light-Normal);
   background-color: white;
 }
-.faq {
+
+.accordion.faq {
   background-color: var(--Base-Background-Primary-Normal);
 }